无法运行Anime JS

Question

我知道这个问题已经张贴，但我没有找到任何可以帮助我解决我的问题。我想用AnimeJS在我的网站上创建一些动画，但我无法运行最简单的动画，即使是anime.js文档和示例中的动画。

我找到了有相同问题的人，并通过在文档加载后运行代码解决了这个问题，但在我的例子中，这似乎不是解决方案n。我使用npm安装了anime.js，在我的页面上使用的无非是这个和Jquery。下面是文档示例的代码：

null

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

#cssSelector {
  width: 100px;
  height: 100Px;
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

null

Answer 1

这是因为元素#cssselector.el的高度为零，并且不是您在屏幕上看到的黑色矩形。将选择器改为实际具有黑色背景的元素，即#cssselector，您将看到它工作：

null

$(document).ready(function() {
  var cssSelector = anime({
    targets: '#cssSelector',
    translateX: 250
  });
});

#cssSelector {
  width: 100px;
  height: 100px;
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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