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

Question

我有一个绝对定位的网格网格(网格由不同形状的矩形组成,它们组合在一起形成一个大矩形).

我试图通过让所有单个矩形从屏幕外"飞入"网格来动画显示此网格.所以左边的矩形从左边开始,右边的矩形从右边开始等.

我正在使用CSS3过渡,当从顶部或左侧飞入时它完美地工作,我只是使用负边距将它们定位在屏幕外,然后将其设置为动画,以更改为margin-left(或margin-top)= 0(例如orignal) /正确的位置).

这似乎比使用变换更有意义,但如果您认为变换有任何理由可以更好地发挥作用/表现,请纠正我吗？

然而,这显然不适用于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);

});