Question

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

他们可能会设置一些CSS动画。我无法控制这些关键帧，无论它们是否设置，都可以控制它们的动画效果。

他们可能会动画opacity。不过，我希望我的opacity元素上的.a保持一定的值，让我们说1，无论它是否有动画。

考虑以下代码，我有三种情况：

我的元素上没有设置动画
有一个动画，但它没有动画opacity
有一个动画，opacity属于动画属性

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

我无法从.a元素中移除关键帧动画，因为我想要其他属性（在这种情况下为background，无论在一般情况下是否有其他属性）继续存在动画。

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

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

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

Answer 1

现在我只想通过添加额外的CSS关键帧动画来实现它：

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

现在，对于设置了.a的所有animation元素，我可以将opacity-override添加到动画名称，它应该处理好事情！

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以使用！important

来破解它

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

然后只是把你不想改变的那个人放在课堂上。关键帧不应该覆盖！重要除非你将！important标记放入关键帧，然后它是最后一个。

将元素的属性强制为某个值，即使它已被设置为动画

2 个答案: