即使将元素设置为动画也将其属性强制为某个值

Question

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

他们可能在上面设置了一些CSS动画。我无法控制这些关键帧，是否已设置关键帧，无法设置动画。

他们可能在做动画opacity。不过，我想在opacity我的.a元素要留一定的价值，让我们说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），我不需要做任何事情。

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

我无法从.a元素中删除关键帧动画，因为我希望其他属性（background在这种情况下，无论是一般情况下的其他情况）都可以保持动画状态。

我无法更改动画，因为我希望它按照最初指定的方式工作，opacity为其他元素（.b）设置动画。

所以问题是，如何检测某个.a元素上的opacity属性是否正在设置动画，如果是，我如何在1通过相同关键帧设置的其他属性设置动画时强制其值保持在？

我想使用香草JS（无库）解决此问题。

Answer 1

现在我突然想到我可以通过添加额外的 CSS 关键帧动画来做到这一点：

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

现在对于所有.a具有animation集合的元素，我可以添加opacity-override到动画名称中，它应该会处理事情！

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

@keyframes opacity-override { 0%, 100% { 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 } }