为什么anime.js不能在我的浏览器中工作？ [英] Why isn't anime.js working in my browser?

问题描述

由于某些原因，我的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

解决方案

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

这就是codepen工作的原因，但你自己的网站却没有。在执行脚本之前，codepen会加载DOM。

For some reason my anime.js isn't working in my browser, but when I give my code to people I know online, it works just fine for them.

Here's my HTML code:

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

and yes, I have linked the cdn ->

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

and here's my JAVASCRIPT code:

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

here's all my code: https://codepen.io/sadsada/pen/GxKePJ

解决方案

You need to load your main.js at the end of the body tag, so the DOM has been loaded by the time your script executes. If you put it in the head (above the body), the DOM has not loaded your elements yet, so anime.js doesn't find them.

This is why the codepen works but your own site didn't. The codepen loads the DOM before executing your scripts.

这篇关于为什么anime.js不能在我的浏览器中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！