CSS转换 – CSS转换混合绝对和相对定位

短而甜美的版本：

可以将位置：relative和position：absolute与CSS平滑转换结合起来吗？

详细版本：

我正在创建一个小部件(我称之为甲板)，我不能有一个崩溃和扩张的状态。到目前为止，这一切都很好。

两国之间的切换自然需要一个过渡动画。这也是工作，但不是我想要实现的方式。我想做的是使用CSS转换，而不是使用JavaScript进行绝对定位，就像我现在一样。

唉，目前的情况是，在扩展状态下，甲板上的牌总是被绝对定位，当他们被添加到甲板上时，他们的位置就是在飞行中计算的。当折叠时，前四个以层叠方式堆叠，其余的在第四个卡的顶部。目视模仿一个堆栈。

这种方法的问题是，我不能依靠正常的布局流程来定位卡片，这有很多原因。如果我使用位置：相对于扩展状态的卡，它们之间很好地流动。但是，向崩溃状态的过渡不是动画 – 只是在一瞬间从一个位置到另一个位置。这是合乎逻辑的，因为没有绝对的定位，浏览器显然不知道从哪里过渡。

到目前为止我是(Fiddle)：

CSS(仅限相关规则)：

div.deck-container {
    position: relative;
}
div.deck-container li {
    display: inline-block;
    position: relative;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
div.deck-container.collapsed li {
    position: absolute;
    left: 9px;
    top: 6px;
}
div.deck-container.collapsed li:first-child {
    left: 0;
    top: 0px;
}
div.deck-container.collapsed li:nth-child(2) {
    left: 3px;
    top: 2px;
}
div.deck-container.collapsed li:nth-child(3) {
    left: 6px;
    top: 4px;
}

HTML(仅相关标记)：

<div class="deck-container">
    <ul>
        <li>Card 1</li>
        <li>Card 2</li>
        <li>Card 3</li>
        <li>Card 4</li>
        <li>Card 5</li>
    </ul>
</div>

在我完美的世界中，将类折叠到div.deck-container会将卡片动画化为折叠位置，反之亦然，但似乎这是不可能的。请有人告诉我我错了

解决方法

不，你不能为position属性动画。只能有一些css属性可以动画，而且大多数都有数字或颜色作为值(有一些例外)。您可以在 w3c css transitions especification中看到此列表。

无论如何，由于您可以动画顶部和左侧的属性，您可以更改一些标记来实现效果，如this fiddle所示。

div.deck-container {
    position: relative;
}
div.deck-container li {
    background-color: #fff;
    position: absolute;
    border: 1px solid black;
    padding: 3px;
    display: inline-block;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
div.deck-container li {
    left: 160px;
    top: 0px;
}
div.deck-container li:first-child {
    left: 0px;
    top: 0px;
}
div.deck-container li:nth-child(2) {
    left: 40px;
    top: 0px;
}
div.deck-container li:nth-child(3) {
    left: 80px;
    top: 0px;
}
div.deck-container li:nth-child(4) {
    left: 120px;
    top: 0px;
}
div.deck-container.collapsed li {
    left: 12px;
    top: 8px;
}
div.deck-container.collapsed li:first-child {
    left: 0;
    top: 0px;
}
div.deck-container.collapsed li:nth-child(2) {
    left: 3px;
    top: 2px;
}
div.deck-container.collapsed li:nth-child(3) {
    left: 6px;
    top: 4px;
}
div.deck-container.collapsed li:nth-child(4) {
    left: 9px;
    top: 6px;
}

我只是将原来的位置设置为绝对位置并定位了这些元素。然后，当切换类时，只有顶部和左侧属性发生变化，所以转换工作。