클래스 제거 시 CSS 애니메이션이 중지되는 것을 방지하는 방법

Question

그리드가 있습니다. 백엔드로부터 업데이트 메시지를 받으면 3초 이내에 행을 주황색으로 강조 표시해야 합니다. 업데이트를 받으면 CSS 클래스 '강조 표시'를 내 행에 추가하고 애니메이션을 재생합니다.

.highlight {
  애니메이션 이름: 하이라이트;
  애니메이션 지속 시간: 3초;
}

@keyframes 하이라이트 {
  0% {
    배경색: 주황색;
  }

  99.99% {
    배경색: 주황색;
  }
}

애플리케이션의 메시지 흐름에 대한 어떤 이유로 인해 3초가 지나기 전에 하이라이트 클래스를 제거해야 애니메이션 작동이 중지됩니다. 애니메이션이 3초가 끝날 때까지 재생되기를 원합니다.

하이라이트 클래스를 삭제해도 애니메이션을 끝까지 재생하려면 어떻게 해야 하나요?

Answer 1

한 가지 가능한 접근 방식은 요소에 데이터 속성을 추가한 다음 거기에 animationend 이벤트 리스너를 추가하여 애니메이션이 완료되면 이벤트 리스너가 클래스를 제거한다는 것을 알 수 있도록 하는 것입니다. 아래 예를 참조하세요.

으아악 으아악 으아악