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

前端之家收集整理的这篇文章主要介绍了覆盖动画填充模式:在JavaScript / CSS中转发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一些我正在制作动画的文字,我使用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并且它将覆盖不透明度.

最佳答案
看起来像动画填充模式设置的CSS属性:转发不能覆盖在同一个元素上.

或者:添加父包装器

一种解决方案是在具有动画填充模式的元素周围放置一个包装器:转发集.然后,为了覆盖转发的属性,您只需更新父级.

然后仅在父级上“覆盖”不透明度:

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

我在这里实现了对你小提琴的改动:http://jsfiddle.net/x3mbkbwL/3/

或者:在里面嵌入一个包装

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

然后仅在嵌套包装器上“覆盖”不透明度:

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

如果转发的不透明度设置为1,则两种方法都能发挥最佳效果.如果它被转发为0,那么它显然不会起作用,因为元素已经被隐藏了.

原文链接:https://www.f2er.com/css/426947.html

猜你在找的CSS相关文章