删除类时如何防止css动画停止答案

【问题标题】：How to prevent css animation to be stopped when class removed删除类时如何防止css动画停止
【发布时间】：2022-09-27 15:09:09
【问题描述】：

我有一个网格。当我从后端收到更新消息时，我需要在 3 秒内用橙色突出显示行。当我得到更新时，我将 css 类 \'highlight\' 添加到我的行并播放我的动画。

.highlight {
  animation-name: highlight;
  animation-duration: 3s;
}

@keyframes highlight {
  0% {
    background-color: orange;
  }

  99.99% {
    background-color: orange;
  }
}

由于应用程序中消息流的某些原因，我需要在 3 秒结束之前删除突出显示类，我的动画将停止工作。我希望我的动画将播放到 3 秒结束。

即使我删除了课程亮点，如何让我的动画播放到最后？

如何使用setTimeout(() => {// remove class actions }, 3000) 设置 3 秒的超时时间？

标签： css reactjs css-animations

【解决方案1】：

如果你取消动画类，它会在逻辑上停止动画。所以你问的是 CSS 关键帧动画类是不可能的。如果你想继续动画，为什么不把它留在元素上呢？为什么一定要取下来？你不能使用替代品，例如不同的类，属性等？

【讨论】：