anime.js动画不工作(动画未启动)
anime.js动画不工作(动画未启动)
提问于 2020-08-27 16:41:51
我刚开始使用anime.js，并编写了这段基本代码，但它不能工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var blue = anime({
targets: '.blue',
translateY: 200,
autoplay: false
});
document.querySelector('.play-blue').onclick = blue.restart;
</script>
<style>
.square {
pointer-events: none;
position: relative;
width: 50px;
height: 50px;
background-color: cornflowerblue;
margin: 4px;
display: inline-block;
}
.blue {
background: blue;
}
.controls {
margin-top: 250px;
}
</style>
<div id="anime-demo">
<div class="square blue"></div>
</div>
<div class="controls">
<button class="play-blue">Animate Blue</button>
</body>
</html>我已经通过npm安装了动漫，当它不能工作时，还包括cdn (6行)，谁能告诉我哪里出错了吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-27 16:44:45
执行document.querySelector语句时，您的元素不存在
将代码包装在load事件侦听器中
我还建议你在按钮上使用addEventListener
window.addEventListener("load", function() {
var blue = anime({
targets: '.blue',
translateY: 200,
autoplay: false
});
document.querySelector('.play-blue').addEventListener("click", blue.restart);
});.square {
pointer-events: none;
position: relative;
width: 50px;
height: 50px;
background-color: cornflowerblue;
margin: 4px;
display: inline-block;
}
.blue {
background: blue;
}
.controls {
margin-top: 250px;
}<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<div id="anime-demo">
<div class="square blue"></div>
</div>
<div class="controls">
<button class="play-blue">Animate Blue</button>
</div>
当你需要更多的控件时，你可以委托：
window.addEventListener("load", function() {
document.querySelector('.controls').addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.tagName ==="BUTTON") {
....
}
});
});这里有一个更通用的版本，你可以研究一下
const parms = {
"blue": {
targets: '.blue',
translateY: 200,
autoplay: false
},
"red": {
targets: '.red',
translateY: 400,
autoplay: false
}
}
const running = {}
window.addEventListener("load", function() {
Object.keys(parms).forEach(key => {
running[key] = anime(parms[key]); // save the object
const but = document.querySelector('.play-' + key);
but.dataset.running = key;
but.addEventListener("click", function() {
running[this.dataset.running].restart()
});
})
});.square {
pointer-events: none;
position: relative;
width: 50px;
height: 50px;
background-color: cornflowerblue;
margin: 4px;
display: inline-block;
}
.blue {
background: blue;
}
.red {
background: red;
}
.controls {
margin-top: 250px;
}<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<div id="anime-demo">
<div class="square blue"></div>
<div class="square red"></div>
</div>
<div class="controls">
<button class="play-blue">Animate Blue</button>
<button class="play-red">Animate Red</button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63612311
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号