覆盖动画填充模式:在JavaScript/CSS中转发

Overriding animation-fill-mode: forwards in JavaScript/CSS

本文关键字：CSS 转发 JavaScript 动画 填充 模式 覆盖      更新时间：2023-09-26

我有一些正在制作动画的文本，我使用CSS关键帧来完成。我保留了动画最终结果的外观，所以我使用动画填充模式：向前这样做，就像这样：

#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，它会覆盖不透明度。

似乎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);

我已经在这里实现了对您小提琴的更改：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，那么它显然不会工作，因为元素已经被隐藏了。

相关文章：