javascript - 覆盖动画填充模式 : forwards in JavaScript/CSS

Question

我有一些要在其中制作动画的文本，我使用 CSS 关键帧来实现。我保留动画最终结果的外观，所以我使用 animation-fill-mode: forwards 这样做，如下所示:

#my-text {
    opacity: 0;
}

.show-me {
    animation-name: show-me;
    animation-duration: 2s;
    animation-fill-mode: forwards
}

@keyframes show-me {
    100% {
        opacity: 1;
    }
}

然后我使用 jQuery 将 show-me 类添加到元素中:

$('#my-text').addClass('show-me');

后来，动画完成后，我尝试通过代码改变元素的不透明度，但是无法这样做:

// this won't change the opacity, unfortunately
$('#my-text').css('opacity', 0);

这是一个显示问题的示例:http://jsfiddle.net/x3mbkbwL/2/

使用填充模式转发时如何覆盖动画中设置的值？我知道当我需要更改元素的不透明度时我可以删除该类(在本例中为“show-me”)，但似乎我应该能够直接覆盖 JavaScript 中的 css，它会覆盖不透明度。

Answer 1

似乎 animation-fill-mode: forwards 设置的 CSS 属性不能在同一个元素上被覆盖。

或者:添加一个父包装器

一种解决方案是在设置了 animation-fill-mode: forwards 的元素周围放置一个包装器。然后，为了覆盖转发的属性，您只需更新父级即可。

<div id="parent">
    <div id="my-text">I just faded in!</div>
</div>

然后仅在父级上“覆盖”opacity:

$('#parent').css('opacity', 0);

我已经在此处对您的 fiddle 实现了更改:http://jsfiddle.net/x3mbkbwL/3/

或者:在里面嵌套一个包装器

如果您愿意，您也可以添加另一个子元素:

<div id="my-text">
    <span id="wrapper">I just faded in!</span>
</div>

然后仅在嵌套包装器上“覆盖”opacity:

$('#wrapper').css('opacity', 0);

如果转发的不透明度设置为 1，则这两种方法效果最佳。如果它被转发到 0 那么它显然不会工作，因为该元素已经被隐藏了。