为什么 width: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>

解决方法

您的“目标”应该是 targets（复数）。根据文档，您应该根据 timeline basics 通过 .add 添加（我称之为）关键帧。不确定您是否明确需要它。

let t = anime.timeline({
  targets: '#centered',loop: false,autoplay: false
});

t.add({ width: 0,duration: 1000 });

t.play();

#centered {
    width: 27px;
    height: 40vh;
    background-color: blueviolet;
  }

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

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

,

以下解决方案如何？

示例 1（带时间线）

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

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

t.play();

示例 2（无时间线）

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

t.play();

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