不使用position:absolute创建css过渡

Question

我意识到css动画是一个很好的主题,但我只是想知道创建简单幻灯片转换的最佳方法？大多数情况下,当你读到像这样的幻灯片转换时,某种位置:绝对是假定的.这不是内容通常以HTML格式组织的方式,也不应该如此.

所以,如果我想创建一个div滑动到左边并且一个div从右边滑动的过渡,那么在不假设任何这些div具有绝对定位或任何其他特定过渡特定内容的情况下,这将是一个好策略.从...开始？

 <div class="container">
     <div class="this-should-slide-left">
         <div>Some content</div>
         <div>Some more</div>
     </div>
     <div class="this-should-from-left"><!--not visible initially-->
         <div>Some more content</div>
     </div>
 </div>

我提出这个似乎有效的解决方案,即使我不确定它是否优雅:

http://jsfiddle.net/CAg4f/4/

Answer 1

动画时移动元素的最佳方法是使用CSS变换进行翻译。
例如，将鼠标悬停在容器上时要进行过渡：

.this-should-slide-left,
.this-should-from-left {
    transition: transform .25s
}

.container .this-should-from-left {
    transform: translateX(100px);
}

.container:hover  .this-should-from-left {
    transform: translateX(0);
}

.container:hover .this-should-slide-left {
    transform: translateX(-100px);
}

由于利用了硬件加速功能，并且不涉及定位，因此平移使过渡更加平滑，因此您可以将布局的设计与动画本身的设计完全分开。

在这里阅读更多

Answer 2

除了absolute定位之外，还有relative定位和margins。

虽然我通常会选择margins操纵过渡，但relative定位可能是最安全的，因为它适用inline于不一定可以通过边距操纵的元素。