22
簡短而親切的版本：CSS過渡混合絕對和相對定位
是否有可能position: relative和position: absolute流暢CSS-的轉變結合起來？
詳細的版本：
我創建一個小部件（我稱之爲甲板），我wan't能夠有一個摺疊和展開狀態。到目前爲止，這很好。
在兩種狀態之間切換，自然會保證過渡動畫。這也在起作用，但不是我希望它實現的方式。我想要做的是使用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，則會將卡動畫到摺疊位置，反之亦然，但似乎這是不可能的。請有人告訴我我錯了。
我害怕這一點。我知道可以通過在展開狀態中使用絕對定位來在這些狀態之間進行動畫處理。但事實證明，即使我使用目前的JavaScript解決方案，我也是如此 - 甚至更好 - 因爲一副牌中的牌數不是有限的。 –
啊，在這種情況下，你肯定需要JS ......無論如何，作爲一個混合的解決方案，你可以使用JS設置卡片頂部和左側的位置，這可能很容易，然後使用轉換爲它們製作動畫。 – scumah
轉換隻有懸停功能？當我懸停在div＃hoverdiv上時，我可以移動div＃test嗎？ – ShibinRagh