>  Q&A  >  본문

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

<p>그리드가 있습니다. 백엔드로부터 업데이트 메시지를 받으면 3초 이내에 행을 주황색으로 강조 표시해야 합니다. 업데이트를 받으면 CSS 클래스 '강조 표시'를 내 행에 추가하고 애니메이션을 재생합니다. </p> <p> <pre class="brush:css;toolbar:false;">.highlight { 애니메이션 이름: 하이라이트; 애니메이션 지속 시간: 3초; } @keyframes 하이라이트 { 0% { 배경색: 주황색; } 99.99% { 배경색: 주황색; } }</pre> </p> <p>애플리케이션의 메시지 흐름에 대한 어떤 이유로 인해 3초가 지나기 전에 하이라이트 클래스를 제거해야 애니메이션 작동이 중지됩니다. 애니메이션이 3초가 끝날 때까지 재생되기를 원합니다. </p> <p>하이라이트 클래스를 삭제해도 애니메이션을 끝까지 재생하려면 어떻게 해야 하나요? </p>
P粉412533525P粉412533525438일 전495

모든 응답(1)나는 대답할 것이다

  • P粉265724930

    P粉2657249302023-08-30 15:52:56

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

    으아악 으아악 으아악

    회신하다
    0
  • 취소회신하다