javascript - Anime.js 动画不工作,(动画没有启动)
问题描述
我刚开始使用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',
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>
推荐阅读
- python - VSCode如何使用GMT时区
- python - 使用python将HTML文件转换为CSV
- python - python中什么是反转列表的一部分的最快方法?
- owl - Grakn 支持什么类型的推理?
- javascript - 试图等待一个循环
- javascript - 带有小数的Javascript正则表达式整数
- python - 编辑 FASTA:如何使用正则表达式和列表更改 FASTA 的标题,并替换文件
- git - 当你从公共切换到私有后删除你的仓库时,fork 会发生什么?
- google-sheets - 如何计算具有多个条件的值
- microsoft-teams - MS Teams 个人选项卡(自定义应用程序)未显示在侧应用程序栏中