Question

我正在创建一个单页网站，其中包含近5000个单词作为文本，以提供特定的动画效果，我需要将div标记中的每个单词都包含在这样的类中。

<div class="word"> word</div>

这会导致div s太多（DOM中的元素太多）。我完全理解在DOM中有5000个元素是荒谬的

还有其他方法吗？

这是我想要达到的效果：

＆＃13;

$('body').children('.word').each(function() {
  $(this).animate({
    "opacity": "1"
  }, Math.floor(Math.random() * 3000) + 500);
});

＆＃13;

.word {
  opacity: 0;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="word">
  hello,
</div>
<div class="word">
  how
</div>
<div class="word">
  are
</div>
<div class="word">
  you
</div>
<div class="word">
  doing
</div>

＆＃13;

编辑： 这是一种更好的方式

http://jsfiddle.net/PrakharThakur/cxvuq96v/

Answer 1

您的问题是$.animate的低性能。它会使疯狂的DOM更新数量（每秒数千次）使您的网站变得缓慢。

你应该使用支持GPU并且没有DOM更新的CSS动画或CSS转换。

您可以创建如下代码：

$('body').children('.word').each(function() {
  $(this).style({transition: 'opacity '+ Math.floor(Math.random() * 3000) + 500) +'s'});
  $(this).addClass('visible');
});

并将以下代码添加到CSS文件中：

 .visible {
      opacity: 1;
  }

Answer 2

看看你的例子，我的原始建议没有给出你在那里展示的效果。

我认为使用5000个单词实现这一点会更加棘手，但是在DOM上创建5000个元素并为它们设置动画并不是那样！

我建议不要让所有元素在不同的时间进入，让它看起来好像是。

考虑在DOM上创建10个（或者更多）元素，这些元素的确定位置使得它看起来像一个完整的句子（或者你想构建内容）。

然后，将随机淡入效果应用于那些DOM元素。这样，只要你在每个DOM元素之间随机分布单词，就会看起来好像它们都是在不同的时间进入。

尝试制作效果所需的DOM元素数量似乎是随机的，同时不会使DOM过载。

包装div中的每个单词都会导致性能问题

2 个答案: