CSS过渡混合绝对和相对定位

Question

简短甜美的版本：

是否有可能将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会将卡片设置为折叠位置，反之亦然，但似乎这是不可能的。请有人告诉我，我错了。

Answer 1

不，你不能动画position属性。您可以设置动画的许多css属性，其中大多数都有数字或颜色作为值（有一些例外）。您可以在w3c css transitions especification中看到此列表。

无论如何，既然你可以动画top和left属性，你可以稍微改变你的标记以达到效果，就像在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;
}

我只是将原始位置设置为绝对位置并定位这些元素。然后，当切换类时，只有topand和left属性发生变化，因此过渡有效。

Answer 2

@ nikc.org也许您可以使用translate代替：

    div.deck-container {
        position: relative;
    }
    div.deck-container li {
        background-color: #fff;
        position: relative;
        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.collapsed li:first-child {
      -webkit-transform: translate(0, 0);
         -moz-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
           -o-transform: translate(0, 0);
              transform: translate(0, 0);
    }
    div.deck-container.collapsed li:nth-child(2) {
        -webkit-transform: translate(-100%, 2px);
         -moz-transform: translate(-100%, 2px);
          -ms-transform: translate(-100%, 2px);
           -o-transform: translate(-100%, 2px);
              transform: translate(-100%, 2px);
    }
    div.deck-container.collapsed li:nth-child(3) {
        -webkit-transform: translate(-200%, 4px);
         -moz-transform: translate(-200%, 4px);
          -ms-transform: translate(-200%, 4px);
           -o-transform: translate(-200%, 4px);
              transform: translate(-200%, 4px);
    }

working example