Html 如何使用 CSS 转换将 div 从屏幕外滑入绝对布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24309789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to slide in divs from off screen into absolute layout using CSS transitions?
提问by deshg
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).
我有一个绝对定位的 div 网格（网格由不同形状的矩形组成，这些矩形组合在一起形成一个大矩形）。
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).
我正在使用 CSS3 过渡，当从顶部或左侧飞入时，它工作得很好，我只是使用负边距将它们定位在屏幕外，然后设置动画以更改为 margin-left（或 margin-top）= 0（例如原始/正确的位置）。
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!
或者，如果有更好的方法（CSS3 很好！），那么我很乐意听到它！
回答by Michael
Don't animate with margins, always animate with transforms, that is their intended use. Here is a great article on that from Paul Irish
不要用边距动画，总是用变换动画，这是它们的预期用途。这是 Paul Irish 的一篇很棒的文章
Why moving elements with translate() is better http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
为什么使用 translate() 移动元素更好 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;
使用 overflow-x: hidden 隐藏从右边进来的 div。这是我制作的小提琴，用于展示如何在不指定像素值的情况下使用变换进行动画处理；
HTML
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
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);
});
回答by drinchev
Usually transform: translate...gives you better performance on most of the browsers, because they try to render the animation using the GPU.
通常transform: translate...在大多数浏览器上为您提供更好的性能，因为它们尝试使用 GPU 渲染动画。
You can check those results from jsperf.
您可以从jsperf检查这些结果。
Anyway another good solution ( without javascript ) would be to attach the animation entirely in CSS with @keyframesand animation:property.
无论如何，另一个好的解决方案（没有 javascript ）是将动画完全附加在 CSS@keyframes和animation:属性中。
More information on this issue is in this article.
这篇文章中提供了有关此问题的更多信息。
From the guidelines you can read
您可以从指南中阅读
Use CSS keyframe animation or CSS transitions, if at all possible. The browser can optimize painting and compositing bigtime here.
如果可能，请使用 CSS 关键帧动画或 CSS 过渡。浏览器可以在这里优化绘画和合成。
