时间戳

首页 > 解决方案 > 为什么宽度：0 不动画（anime.js）

javascript - 为什么宽度：0 不动画（anime.js）

问题描述

我正在尝试创建一个元素宽度的动画，但即使是这个基本代码也不起作用，我不知道为什么，也许有人可以。

<script src="anime.min.js"></script>
<script src="jquery-3.1.0.js"></script>

<div id="centered">
</div>

<style>
  #centered {
    width: 500px;
    height: 40vh;
    background-color: blueviolet;
  }
</style>

<script>
let t = anime.timeline({
  target: '#centered',
  loop: false,
  autoplay: false,
  width: 0,
  duration: 1000,
});

t.play();
</script>

标签： javascripthtmlcssanimationanime.js

解决方案

以下解决方案如何？

示例 1（带时间线）

var t = anime.timeline({
  duration: 1000,
  loop: false,
  autoplay: false,
});

t.add({
  targets: '#centered',
  width: 0
})

t.play();

示例 2（无时间线）

var t = anime({
  duration: 1000,
  loop: false,
  autoplay: false,
  targets: '#centered',
  width: 0
});

t.play();

有关更多信息，最好查看官方文档。 https://animejs.com/documentation/

推荐阅读