我正在尝试将 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/