<p>I have a grid. When I receive an update message from the backend, I need to highlight the rows in orange within 3 seconds. When I receive an update I add the css class 'highlight' to my row and play my animation. </p> <p> <pre class="brush:css;toolbar:false;">.highlight { animation-name: highlight; animation-duration: 3s; } @keyframes highlight { 0% { background-color: orange; } 99.99% { background-color: orange; } }</pre> </p> <p>Due to some reason with the message flow in the application, I need to remove the highlight class before the 3 seconds are up so that my animation stops working. I want my animation to play until the end of 3 seconds. </p> <p>How can I make my animation play to the end even if I delete the highlight class? </p>

document.getElementById('clicky').addEventListener('click', () => {
  const element=document.querySelector('.highlight');
  element.setAttribute('data-remove-class', 'highlight');
  element.innerHTML='将在动画结束时移除类';
});

document.querySelector('.highlight').addEventListener('animationend', (e) => {
  const removeClass = e.target.getAttribute('data-remove-class');
  if (removeClass == 'highlight') {
    e.target.classList.remove(removeClass);
    e.target.removeAttribute('data-remove-class');
    e.target.innerHTML='类已移除！';
  }
});

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

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

<div class='highlight'>正在动画中！</div>
<button id='clicky'>移除类</button>