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

Question

简短甜美的版本:

是否有可能结合起来position: relative,并position: absolute与流畅的CSS-过渡？

详细版本:

我正在创建一个小小部件(我称之为Deck),我不能让它崩溃和扩展状态.到目前为止,这一切都很好.

在两种状态之间切换,自然需要过渡动画.这也是有效的,但不是我希望它实现的方式.我想做的是使用CSS转换,而不是使用JavaScript进行绝对定位,就像我现在一样.

唉,目前的情况是,在展开状态下,牌组中的牌总是绝对定位,他们的位置是在他们被添加到牌组时即时计算的.折叠时,前四个以级联方式堆叠,其余四个以第四张卡顶部堆叠.视觉上模仿堆栈.

这种方法的问题在于我不能依靠正常的布局流来定位卡,这有很多原因.如果我position: relative用于扩展状态的卡片,它们会一个接一个地流动.但是向崩溃状态的过渡并没有被激活 - 只是瞬间从一个位置攫取到另一个位置.这是合乎逻辑的,因为首先没有绝对定位,浏览器显然不知道从哪里过渡.

到目前为止我所拥有的是(小提琴):

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过渡指定中看到此列表.

无论如何,既然你可以动画top和left属性,你可以稍微改变你的标记以达到效果,就像这个小提琴一样.

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;
}

我只是将原始位置设置为绝对位置并定位这些元素.然后,拨动上课的时候,只有top和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);
    }

工作实例