Way to prevent CSS animation from stopping when removing a class

Question

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.

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

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

  99.99% {
    background-color: orange;
  }
}

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.

How can I make my animation play to the end even if I delete the highlight class?

Answer 1

One possible approach would be to add a data-attribute to the element and then add an animationend event listener to it so that when the animation completes, the event listener knows to remove the class. See example below.

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>