如何使用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。这是我做的一个小提琴来展示如何在不指定像素值的情况下使用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...在大多数浏览器上给你更好的性能，因为他们尝试使用GPU渲染动画。

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

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

关于这个问题的更多信息在本文中。

从指南中你可以读到

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