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

翻译使得过渡更加顺畅，因为它利用了硬件加速，而且没有涉及定位，因此您可以完全分离布局设计和动画本身的设计。

不使用position：absolute创建css过渡

2 个答案: