【发布时间】：2011-12-24 09:24:28
【问题描述】：
短而甜的版本：
是否可以将 position: relative 和 position: absolute 与平滑的 CSS 过渡结合起来？
详细版：
我正在创建一个小部件（我称之为 Deck），我不希望它具有折叠和展开状态。到目前为止一切顺利，一切正常。
在两种状态之间切换，自然需要过渡动画。这也有效，但不是我希望实现的方式。我想做的是使用 CSS 转换，而不是像现在这样使用 JavaScript 使用绝对定位。
唉，目前的情况是，在展开状态下，牌组中的牌总是绝对定位，它们的位置是在添加到牌组时动态计算的。折叠时，前四张以级联方式堆叠，其余在第四张牌的顶部。在视觉上模仿堆栈。
这种方法的问题是我不能依靠正常的布局流程来定位卡片，这有很多原因很糟糕。如果我将position: relative 用于展开状态的卡片，它们会一个接一个地流畅地流动。但是到折叠状态的过渡并没有动画 - 只是在瞬间从一个位置捕捉到另一个位置。这当然是合乎逻辑的，因为首先没有绝对定位，浏览器显然不知道从哪里过渡。
我目前拥有的是这个 (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>
在我的完美世界中，将 collapsed 类添加到 div.deck-container 会使卡片动画化到它们的折叠位置，反之亦然，但这似乎是不可能的。请有人告诉我我错了。
【问题讨论】：
标签： css-transitions css