クラスを削除するときに CSS アニメーションが停止しないようにする方法

Question

グリッドがあります。 バックエンドから更新メッセージを受信したら、3 秒以内に行をオレンジ色で強調表示する必要があります。 更新を受信したら、CSS クラス「ハイライト」を行に追加し、アニメーションを再生します。

.highlight {
  アニメーション名: ハイライト;
  アニメーション期間: 3 秒。
}

@keyframes ハイライト {
  0% {
    背景色: オレンジ;
  }

  99.99% {
    背景色: オレンジ;
  }
}

アプリケーションのメッセージ フローに何らかの理由があり、アニメーションが動作しなくなるように、3 秒が経過する前にハイライト クラスを削除する必要があります。アニメーションを 3 秒間終了するまで再生したいと考えています。

ハイライト クラスを削除してもアニメーションを最後まで再生するにはどうすればよいですか?

Answer 1

考えられるアプローチの 1 つは、要素に data-attribute を追加してから、それにanimationend イベント リスナーを追加して、アニメーションが完了したときにイベント リスナーがクラスを削除することを認識できるようにすることです。以下の例を参照してください。

リーリー リーリー リーリー