覆盖动画填充模式：在JavaScript/CSS中向前

我有一些我正在制作动画的文本，我使用CSS关键帧来制作动画。我保留动画最终结果的外观，因此我使用动画填充模式：Forward来实现此目的，如下所示：

#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);

下面是一个示例，说明了问题：

---

使用“填充模式前进”时，如何覆盖动画中的值集？我知道，当我需要更改元素的不透明度时，我可以删除该类（在本例中为“show me”），但似乎我应该能够直接覆盖JavaScript中的css，并且它将覆盖不透明度。

似乎是由

动画填充模式设置的css属性：forwards

无法在同一元素上覆盖

或者：添加一个父包装器 一种解决方案是在设置了

动画填充模式：forwards

的元素周围放置一个包装器。然后，为了覆盖转发的属性，您将只更新父属性

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

我在这里对您的小提琴进行了更改：

或者：在里面嵌套一个包装 如果愿意，也可以添加另一个子元素：

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

如果将“转发不透明度”设置为

1

，则这两种方法的效果最佳。如果它被转发到

0

，那么它显然无法工作，因为元素已经隐藏

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

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