javascript - anime.js为什么不起作用？

我正在尝试将anime.js加载到我的网站中，并且无法正常工作。我已经下载了.ZIP并将其放入名为/ js /的子文件夹中并正确引用。我什至可以在Chrome检查的源代码中查看anime.min.js文件。

  <body>
    <div class="container">
    <div class="section center">
      <h1 class="title"></h1>
          <section>
                <div class="purple"></div>
                <div class="darkgreen"></div>
                <div class="darkred"></div>
            </div>
          </div>
          </section>
      </div>
    </div>
  <footer class="center">


    <p>CREATED BY HARRY BENDIX-LEWIS | 2017</p>
      </footer>
      <script src="js/anime.min.js" type="text/javascript">
      window.onload = function() {
      anime({
      targets: ['.purple', '.darkgreen', '.darkred'],
      rotate: 360,
      borderRadius: '50%',
      duration: 3000,
      loop: true
    });
    }
      </script>
    </body>

我也有：

<script src="js/anime.min.js"></script>

在我脑海中。

编辑：忘记了我的CSS

div {
    height: 50px;
  width: 50px;
    margin: 10px;
}

.purple {
    background-color: purple;
}

.darkgreen {
    background-color: darkgreen;
}

.darkred {
    background-color: darkred;
}

对我来说，为什么动画不起作用是没有意义的。我从CodePen上的示例页面中获取了该代码。

最佳答案

您正在使用自己的代码同时加载脚本，因为您使用的是同一标签。您必须确保已读取anime.min.js，然后才能取消定义代码或动漫。将其放在两个单独的脚本元素中：

<script src="js/anime.min.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function() {
        anime({
            targets: ['.purple', '.darkgreen', '.darkred'],
            rotate: 360,
            borderRadius: '50%',
            duration: 3000,
            loop: true
        });
    }
</script>

如果错误仍然存在，您可以随时检查是否存在动画检查window.anime！== undefined，否则使用超时，但是我之前说过的这种方式应该可以工作