gpt4 book ai didi

javascript - 为什么 anime.js 不工作?

转载 作者:行者123 更新时间:2023-11-30 09:35:06 25 4
gpt4 key购买 nike

我正在尝试将 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,否则使用超时,但我之前说过的这种方式应该有效

关于javascript - 为什么 anime.js 不工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44027197/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com