將元素的屬性強制爲某個值，即使它正在動畫

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; } 

，然後只是把在類中你不希望其不透明度改變的人。除非將重要標籤放入關鍵幀中，否則關鍵幀不應覆蓋！重要的標籤，那麼最後選擇哪一個。