如何使用 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。这是我制作的一个小提琴，用于展示如何在不指定像素值的情况下使用变换制作动画；

https://jsfiddle.net/P9GNS/3/

$('.box-wrapper').each(function(index, element) {

  setTimeout(function() {
    element.classList.remove('loading');
  }, index * 600);

});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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>

Answer 2

通常

transform: translate...

可以在大多数浏览器上为您提供更好的性能，因为它们尝试使用 GPU 渲染动画。

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

无论如何，另一个好的解决方案（没有 javascript ）是完全在 CSS 中使用

@keyframes

和

animation:

属性附加动画。

有关此问题的更多信息请参阅本文。

您可以从指南中阅读

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