gpt4 book ai didi

javascript - 为什么这个基本的 anime.js 不起作用?

转载 作者:行者123 更新时间:2023-11-28 15:22:57 27 4
gpt4 key购买 nike

我开始学习 Anime.JS。为了查看它是如何工作的,我从他们的 documentation website 中复制了一些非常基本的示例代码。 .奇怪的是,正方形并没有像它应该的那样向右 250px 动画...

HTML:

<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="anime.min.js"></script>
<script src="script.js"></script>
</head>

<body>
<div id="cssSelector">
<div class="line">
<div class="square el"></div>
</div>
</div>
</body>

</html>

CSS:

body{
background-color: #232323;
}

.square{
width: 100px;
height: 100px;
background-color: red;
}

和Javascript

var cssSelector = anime({
targets: '#cssSelector .el',
translateX: 250
});

我看到正方形,但没有动画。程序确实读取了 anime.min.js,因为控制台中没有错误消息。

最佳答案

我认为您正试图在页面加载之前运行您的代码。

添加这个:

function main(){
anime({
targets: '#cssSelector .el',
translateX: 250
});
}

document.addEventListener("DOMContentLoaded", main);

然后它应该工作:https://jsfiddle.net/DerekL/980j4591/

关于javascript - 为什么这个基本的 anime.js 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45746489/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com