为什么anime.js 不工作？

Question

为什么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>

Run Code Online (Sandbox Code Playgroud)

我也有：

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

Run Code Online (Sandbox Code Playgroud)

在我脑海中。

编辑：忘记了我的 CSS

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

.purple {
    background-color: purple;
}

.darkgreen {
    background-color: darkgreen;
}

.darkred {
    background-color: darkred;
}

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

小智 5

您正在使用自己的代码同时加载脚本，因为您使用的是相同的标签。您必须确保在您的代码或动画未定义之前已阅读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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	8 年，6 月前
查看次数：	5701 次
最近记录：	8 年，6 月前