如何使用 CSS 过渡将 div 从屏幕外滑入绝对布局？

Question

我有一个绝对定位的 div 网格（网格由不同形状的矩形组成，它们组合在一起形成一个大矩形）。

我试图通过让所有单独的矩形从屏幕外“飞”到网格中来为该网格的显示设置动画。所以左侧的矩形从左侧飞入，右侧的矩形从右侧飞入，等等。

我正在使用 CSS3 过渡，当从顶部或左侧飞入时，它工作得很好，我只是使用负边距将它们定位到屏幕之外，然后将其设置为动画以更改为 margin-left（或 margin-top）= 0（例如原始/正确位置）。

这似乎比使用转换更有意义，但如果您认为转换会因任何原因更好地工作/执行，请纠正我？

但是，这显然不适用于 margin-right/margin-top，所以我想看看是否有人可以建议从右侧和底部实现这一目标的最佳方法是什么？我可以使父溢出：隐藏并为左/上位置设置动画，这将产生相同的效果，但我想看看是否有一个等效于负边距的通用解决方案，以防止每个屏幕外和屏幕上都需要单独的规则/位置版本？例如，当使用负边距时，我可以对从同一侧飞入的所有框应用相同的负边距，而无需任何特定于元素的标记（但如果我为顶部/左侧设置动画，则每个元素都需要它自己的“屏幕外”位置相对到它的最终位置，所以它从正确的地方飞进来）。

或者，如果总体上有更好的方法（CSS3 很好！），那么我很想听听！

Answer 1

不要使用边距制作动画，始终使用变换制作动画，这是它们的预期用途。这是 Paul Irish 的一篇很棒的文章

为什么用 translate() 移动元素更好 http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

使用overflow-x:hidden 隐藏从右边进来的div。这是我制作的一个小提琴，用于展示如何在不指定像素值的情况下使用变换制作动画；

http://jsfiddle.net/P9GNS/3/

HTML

    <div class="box-wrapper loading"><div class="box"></div></div>
    <div class="box-wrapper loading"><div class="box"></div></div>
    <div class="box-wrapper loading"><div class="box"></div></div>
    <div class="box-wrapper loading"><div class="box"></div></div>
    <div class="box-wrapper loading"><div class="box"></div></div>
    <div class="box-wrapper loading"><div class="box"></div></div>

CSS

    body {
        overflow-x: hidden;
    }


    .box-wrapper {
        -webkit-transition-duration: 600ms;
        transition-duration: 600ms;
    }


    .box-wrapper.loading:nth-child(odd) { transform: translate(100%) }
    .box-wrapper.loading:nth-child(even) { transform: translate(-100%) }


    .box-wrapper:nth-child(odd)  .box { background: orange }
    .box-wrapper:nth-child(even) .box { background: red }


    .box {
        margin: auto;
        width: 100px;
        height: 100px;
    }

JAVASCRIPT

    $('.box-wrapper').each(function(index, element) {
        
        setTimeout(function(){
            element.classList.remove('loading');
        }, index * 600);

    });

Answer 2

通常transform: translate... 在大多数浏览器上为您提供更好的性能，因为它们尝试使用 GPU 渲染动画。

您可以从jsperf 查看这些结果。

无论如何，另一个好的解决方案（不使用 javascript）是使用 @keyframes 和 animation: 属性完全在 CSS 中附加动画。

关于这个问题的更多信息在this article。

您可以阅读指南

尽可能使用 CSS 关键帧动画或 CSS 过渡。浏览器可以在这里优化绘画和合成。