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
})

如果我检查该元素，则会发现该元素被立即设置为translationX（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

第一个小提琴中的所有代码都是正确的，除了css中缺少的部分。

\subsection{Critique } \begin{longtable}{|p{0.2\linewidth}|p{0.4\linewidth}|p{0.4\linewidth}|} \endhead \endfoot \hline \textbf{Solutions existantes} & \textbf{Avantages} & \textbf{Inconvénients}\\ \hline Le logiciel 1&- aaa : bbbb. - vvv: rrrr. - eeee : rrrrr. & - Application : * aaaaaaaaaaaa * ffffffff. * hhhh - eeee. // 2秒钟即可进行更改。您可以将其更改为所需值

检查fiddle here。

Answer 2

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

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

demo 。

Animejs：translateX 0值不起作用

2 个答案: