如何使用CSS转换将屏幕外的div滑入绝对布局？ [英] How to slide in divs from off screen into absolute layout using CSS transitions?

问题描述

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

我试图通过让所有单个矩形从屏幕外飞入网格，为此网格的显示设置动画。所以左边的矩形从左边飞入，右边的矩形等等。

我使用CSS3转换，当从顶部飞入或让它完美地工作，我只是使用负边距将它们定位在屏幕外，然后将其设置为边距左边（或边距顶部）= 0（例如原始/正确位置）。

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

然而，这显然不适用于保证金/最高利润率，所以我想看看是否有人能够提出实现这一目标的最佳方法是从右边还是最下方？我可以使父级溢出：隐藏和动画左/顶部位置将会有相同的效果，但我想看看是否有一个通用的解决方案相当于负边界，以防止需要单独的规则/位置为每个关闭和屏幕上版？例如，当使用负边距时，我可以将相同的负边距应用于从同一边飞入而没有任何元素特定标记的所有框（但如果我为顶部/左边设置动画，则每个元素都需要它自己的屏幕外相对位置到它的最终位置，所以它从正确的地方飞）。

另外，如果有更好的方法（CSS3很好！），那么我很乐意听到它！！

解决方案

请勿使用边距进行动画制作，始终使用变形制作动画，这是其预期用途。这里有一篇关于Paul Irish的文章

为什么用translate（）移动元素更好
http://paulirish.com/2012/why-moving-elements-with-translate-使用overflow-x：hidden隐藏从右侧进入的div。使用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; 
 
 
 $ b .box-wrapper.loading：nth-​​child（odd）{transform：translate（100％）} 
 .box-wrapper.loading： nth-child（偶数）{transform：translate（-100％）} 
 
 
 .box-wrapper：nth-​​child（奇数）.box {background：orange} 
 .box-wrapper：nth-​​child（偶数）.box {background：red} 
 
 
 .box {
 margin：auto; 
 width：100px; 
 height：100px; 
 
 $ / code> 

JAVASCRIPT



<$ p $（）。code $（'。box-wrapper'）。each（function（index，element）{

setTimeout（function（）{
element.classList。删除（'loading'）;
}，index * 600）;

}）;


I have a grid of absolutely positioned divs (the grid is made up of differently shaped rectangles that fit together to make a large rectangle).

I am trying to animate the display of this grid by having all of the individual rectangles 'fly' into the grid from offscreen. So the rectangles on the left fly in from the left, the ones on the right from the right etc.

I am using CSS3 transitions and when flying in from the top or left it works perfectly, I just use negative margins to position them off screen and then animate this to change to margin-left (or margin-top) = 0 (e.g. the orignal/correct position).

This seems to make more sense than using transforms but please correct me if you think there is a reason that transforms will work/perform better for any reason?

However this obviously won't work for margin-right/margin-top and so i wanted to see if anyone can suggest what the best way to achieve this is from the right and bottom? I can make the parent overflow:hidden and animate the left/top positions which will have the same effect but I wanted to see if there's a generic solution equivalent to negative margins so as to prevent needing separate rules/positions for each off and on screen version? eg when using negative margins i can apply the same negative margin to all boxes that fly in from the same side without having any element specific mark up (but if i animate the top/left then each element will need it's own 'offscreen' position relative to it's final position so it flies in from the right place).

Alternatively if there is a better way in general (CSS3 is fine!) then I would love to hear it!

解决方案

Don't animate with margins, always animate with transforms, that is their intended use. Here is a great article on that from Paul Irish

Why moving elements with translate() is better http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Use overflow-x: hidden to hide the divs coming in from the right. Here is a fiddle I made to show how you can animate with transform without specifying pixel values;

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

});

这篇关于如何使用CSS转换将屏幕外的div滑入绝对布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！