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

Question

我有一个绝对定位div的网格(网格由不同形状的矩形组成，它们拼接在一起形成一个大矩形)。

我试图通过让所有单独的矩形从屏幕外‘飞’到网格中来动画这个网格的显示。所以左边的矩形从左边飞进来，右边的矩形从右边飞进来，等等。

我正在使用CSS3过渡，当从顶部或左侧飞入时，它可以完美地工作，我只需使用负边距将它们定位到屏幕外，然后将其动画更改为边距-左侧(或边距-顶部)=0(例如，原始/正确位置)。

这似乎比使用变换更有意义，但如果你认为有理由使变换工作/执行得更好，请纠正我？

然而，这显然不适用于右边界/上边界，所以我想看看是否有人能从右侧和底部提出实现这一目标的最佳方法？我可以使父溢出:隐藏和动画左侧/顶部的位置，这将具有相同的效果，但我想看看是否有一个通用的解决方案等同于负边距，以避免需要为每个屏幕下和屏幕上的版本单独的规则/位置？例如，当使用负边距时，我可以将相同的负边距应用于从同一侧飞入的所有框，而不需要任何元素特定的标记(但如果我设置顶部/左侧的动画，那么每个元素都需要相对于其最终位置有自己的“屏幕外”位置，以便它从正确的位置飞入)。

或者，如果通常有更好的方法(CSS3就可以！)那我会很乐意听的！

Answer 1

不要使用边距来设置动画，始终使用变换来设置动画，这是它们的预期用途。这是保罗·爱尔兰写的一篇很棒的文章

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

使用overflow-x: hidden隐藏来自右侧的div。这是我制作的一个小提琴，用来展示如何在不指定像素值的情况下使用transform设置动画；

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...会在大多数浏览器上提供更好的性能，因为它们会尝试使用图形处理器渲染动画。

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

无论如何，另一个好的解决方案(没有javascript )是完全在CSS中附加带有@keyframes和animation:属性的动画。

有关此问题的更多信息，请访问this article。

从指南中你可以读到

如果可能，

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