Animejs：translateX 0 值不起作用

Question

我需要将某些 DOM 元素从某个位置设置为 0px 的动画，但它不适用于 animejs。

css:

.animate {
  transform: translateX(50px);
  width: 50px;
  height: 50px;
  background: #12acec;
  border-radius: 50%;
}

这里是 JS:

anime({
  targets: '.animate',
  translateX: 0,
  duration: 300
})

如果我检查该元素，我会看到该元素立即设置为 translateX(0px) (fiddle 1)。

但是如果我使用不同于 0 的值，它会起作用 (fiddle 2)。

是 animejs 错误还是我做错了？如果这是一个错误，有没有办法用 animejs 处理 translateX 上的 0 值？

更新： 我的目标是处理连续动画...

<div class="handwritting">
   <span>T</span>
   <span>e</span>
   <span>x</span>
   <span>t</span>
</div>

Js手写

anime({
  targets: '.handwritting span',
  opacity: 1,
  duration: 5000,
  delay: function (_, i) {
     return i * 100
  }
})

...但它不适用于翻译但适用于不透明度。 (fiddle 3)

谢谢

Answer 1

第一个 fiddle 中的所有代码都是正确的，除了 css 中的缺失部分。

transition-duration: 2s; //2 秒发生变化。您可以将其更改为所需的值

Answer 2

解决方案是更改 translateX 值并将值作为数组传递：

translateX: [50, 0] // [from, to]

这里是demo.

Animejs: translateX 0 value doesn't work