我刚开始使用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 行)谁能告诉我哪里出错了..?