Anime.js 关于第一个例子

Question

根据http://animejs.com/documentation/第一个例子：

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

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

关于'anime.js code'，我认为css属性可能不适用于class="square"在HTML中的'anime.js code' ].因此，我添加了 square.

<style>
.square {
  pointer-events: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 4px;
  display: inline-block;
}
</style>

查看正方形，但没有任何移动发生。你对这个例子有什么建议吗？

Answer 1

您的代码运行良好 - 我猜您忘记包含 jQuery.

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

.square {
  pointer-events: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 4px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<body>
<div id="cssSelector">
  <div class="line">
    <div class="square el"></div>
  </div>
</div>
</body>

Anime.js 关于第一个例子

Anime.js about first example

anime.js