将元素的属性强制为某个值，即使它正在动画

Question

我有两种类型的元素，我们称它们为.a和.b。

他们可能会设置一些CSS动画。我无法控制这些关键帧，无论它们是否设置，以及它们的动画效果如何。他们可能会动画opacity。不过，我希望我的元素上的opacity保持一定的值，比如说1，无论它是否为动画。

考虑下面的代码，在那里我有三种情况：

1. 没有在我的元素被设置
2. 有一个动画的动画，但它不是动画opacity
3. 有一个动画和opacity是属性之间进行动画

div { 
 
    /* some dummy styles so we can see stuff */ 
 
    display: inline-block; 
 
    width: 5em; height: 5em; 
 
    background: purple; 
 
} 
 

 
[class*='ani'] { animation: a 1s ease-out infinite alternate } 
 

 
.ani--one { animation-name: ani-one } 
 

 
@keyframes ani-one { to { transform: scale(.5) } } 
 

 
.ani--two { animation-name: ani-two } 
 

 
@keyframes ani-two { 
 
    to { 
 
    opacity: 0; 
 
    background: orange; 
 
    } 
 
}

<div class='a'></div> 
 
<div class='b'></div> 
 
<div class='a ani--one'></div> 
 
<div class='b ani--one'></div> 
 
<div class='a ani--two'></div> 
 
<div class='b ani--two'></div>

在在前两种情况下（1 =无关键帧动画和2 =关键帧动画，但它不是动画opacity）我不需要做任何事情。

在最后一种情况，但是，我需要以某种方式强制.a元素的opacity到1，取消只是属性的动画效果。

我无法从.a元素中删除关键帧动画，因为我希望其他属性（本例中为background，其他任何可能在一般情况下）继续保持动画效果。

我不能改变动画，因为我想让它像最初指定的那样工作，为其他元素（.b）设置动画opacity。

所以，问题是，我怎么能检测如果一个.a元素，在opacity属性被动画，如果是这样，我怎么能强迫它的价值留在1，而其他属性通过设置相同的关键帧正在动画？

我想用香草JS解决这个问题，没有库。

Answer 1

现在它只是打我，我能做到这一点通过增加一个额外的CSS关键帧动画：

@keyframes opacity-override { 0%, 100% { opacity: 1 } } 

现在针对具有animation集中的所有.a元素，我可以添加opacity-override到动画的名字和它应该照顾的事情！

此外，我可以使用它来强制opacity: 1针对可能在悬停时或添加其他类时设置的样式，这非常方便！

const _A = document.querySelectorAll('.a'); 
 

 
_A.forEach(a => { 
 
    let aname = getComputedStyle(a).animationName; 
 
    
 
    if(aname !== 'none') a.style.animationName = `${aname}, opacity-override`; 
 
    else a.style.animation = 'opacity-override 1s infinite'; 
 
});

div { 
 
    /* some dummy styles so we can see stuff */ 
 
    display: inline-block; 
 
    width: 5rem; height: 5rem; 
 
    background: purple; 
 
    color: white; 
 
    font: 700 3em/5rem verdana; 
 
    text-align: center; 
 
} 
 

 
div:hover { opacity: .7 } 
 

 
[class*='ani'] { animation: a 1s ease-out infinite alternate } 
 

 
.ani--one { animation-name: ani-one } 
 

 
@keyframes ani-one { to { transform: scale(.5) } } 
 

 
.ani--two { animation-name: ani-two } 
 

 
@keyframes ani-two { 
 
    to { 
 
    opacity: 0; 
 
    background: orange; 
 
    } 
 
} 
 

 
@keyframes opacity-override { 0%, 100% { opacity: 1 } }

<div class='a'>A</div> 
 
<div class='b'>B</div> 
 
<div class='a ani--one'>A</div> 
 
<div class='b ani--one'>B</div> 
 
<div class='a ani--two'>A</div> 
 
<div class='b ani--two'>B</div>

Answer 2

您可以通过使用本事！重要

.solid-always { opacity:1 !important; } 

，然后只是把在类中你不希望其不透明度改变的人。除非将重要标签放入关键帧中，否则关键帧不应覆盖！重要的标签，那么最后选择哪一个。