为什么 anime.js 在我的浏览器中不工作？

Question

出于某种原因，我的 anime.js 在我的浏览器中无法正常工作，但是当我将我的代码提供给我在网上认识的人时，它对他们来说工作正常。

这是我的 HTML 代码：

<div id="CSStransforms">
  <div class="square el"></div>
</div>

是的，我已经链接了 cdn ->

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script src="main.js"></script>

这是我的 JAVASCRIPT 代码：

var CSStransforms = anime({
  targets: '#CSStransforms .el',
  translateX: 250,
  scale: 2,
  rotate: '1turn'
});

这是我的全部代码：https://codepen.io/sadsada/pen/GxKePJ

Answer 1

您需要在 body 标签的 end 处加载您的 main.js，因此 DOM 已加载到时间你的脚本执行。如果你把它放在 head 中（在 body 之上），DOM 还没有加载你的元素，所以 anime.js 找不到它们。

这就是为什么 codepen 有效而您自己的网站却无效的原因。 codepen 在执行脚本之前加载 DOM。