问题描述
我刚开始使用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行） 谁能告诉我我要去哪里错了..？
解决方法
当您执行document.querySelector语句时，您的元素不存在
将代码包装在加载事件监听器中
我还建议您在按钮上使用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',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>