javascript - 让许多元素平滑淡入

Question

我有一个画廊页面，其中显示了一大堆照片缩略图（> 50），我希望每张图片在加载时都会淡入。我已经设法让它工作了，但是一旦我试图同时淡入 20 多张左右的图像，淡入效果就会变得非常生涩。有没有更好的方法可以平滑地淡入大量元素？

现在我正在做的是使用 css 转换，所以每个元素最初都有

.aThumbnail {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
}

然后在代码中我做

aThumbnail.onload = function(){
  this.style.opacity = 1;
}

score 0 · Accepted Answer

三种可能：

如果这些是加载时间不长的小图像，那么我建议只淡化前二十个左右。如果您正在谈论可能同时运行数百个动画（因为每个动画都完全取决于加载时间），那么我可以理解为什么这会降低速度。
另一种选择是将您的时间减少到半秒甚至四分之一秒的淡入淡出，以便在其他过渡开始时更快地完成过渡。
最后，为它们的“组”设置不同的类，其中一些组在开始加载之前“暂停”。这样，第 1 组首先加载，完成后，再加载第 2 组，依此类推。

1 回答 1