无法运行动漫 JS答案

【问题标题】：Unable to run Anime JS无法运行动漫 JS
【发布时间】：2021-03-22 13:38:47
【问题描述】：

我知道这个问题已经发布，但我没有发现任何可以帮助我解决问题的方法。所以这里是：我想在我的网站上使用 AnimeJS 创建一些动画，但我无法运行最简单的动画，即使是来自anime.js 文档和示例的动画。

我发现有人遇到同样的问题，并通过在加载文档后运行代码解决了这个问题，但在我的情况下，这似乎不是解决方案n。我使用 npm 安装了anime.js，我只在我的页面上使用了这个和 Jquery。以下是文档示例的代码：

$(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>

【问题讨论】：

标签： javascript html anime.js

【解决方案1】：

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

$(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>

或者更改您的样式表，以便将样式应用于.el 元素：

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

#cssSelector .el {
  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>

【讨论】：