动画JS和不透明度

Question

我想使用 animate 来移动和淡化元素，但是 opacity 属性不影响动画。 到目前为止，我已经做到了：

let timeline1 = anime.timeline();

   timeline1.add({
      targets: '#operation .letter',
      translateY: [0,40],
      opacity: [0, 1],
      easing: "linear",
      duration: 300,
      delay: (el, i) =>   30 * i
    })

翻译和其他属性工作正常，但似乎它不是将透明度作为css属性而是作为属性进行更改。

在HTML中，一旦呈现，目标会显示：

<span class="letter" opacity="1" style="transform: translateY(40px);">p</span>

看起来要将不透明度作为属性获取，而不是像CSS属性那样。

我尝试了opacity: 1和opacity：“1”都没有改变动画效果。

提前致谢。

- Felox

---

let timeline1 = anime.timeline(); 让我们创建一个名为timeline1的动画时间轴。 - Felox

在标签中不必包含不透明度。因为opacity=1已经是默认值。 - s.kuznetsov

你能给我们展示一下 HTML 吗？当使用 HTML 检查器时，通常在动画进行时，你应该能够看到 style 属性中的值发生变化。这是否也适用于不透明度？ - cipherdragon

Answer 1

我在 .css 文件中将 "opacity" 属性设置为 0，并像这样配置了脚本：

var timeline = anime.timeline();

timeline.add({
    targets: '#home-intro',
    opacity: 1,
    duration: 4000,
}
);

一切都正常，无论是否有时间轴。

- Luca Scandroglio