Question

我开始学习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，因为控制台中没有错误消息。

Answer 1

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

添加：

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

document.addEventListener("DOMContentLoaded", main);

然后它应该有效：https://jsfiddle.net/DerekL/980j4591/

为什么这个基本的anime.js不起作用？

1 个答案: