Ich habe ein Raster. Wenn ich eine Update-Nachricht vom Backend erhalte, muss ich die Zeilen innerhalb von 3 Sekunden orange hervorheben. Wenn ich ein Update erhalte, füge ich die CSS-Klasse „highlight“ zu meiner Zeile hinzu und spiele meine Animation ab.
.highlight { Animationsname: hervorheben; Animationsdauer: 3s; } @keyframes markieren { 0 % { Hintergrundfarbe: Orange; } 99,99 % { Hintergrundfarbe: Orange; } } Aus irgendeinem Grund mit dem Nachrichtenfluss in der Anwendung muss ich die Hervorhebungsklasse entfernen, bevor die 3 Sekunden abgelaufen sind, damit meine Animation nicht mehr funktioniert. Ich möchte, dass meine Animation bis zum Ende von 3 Sekunden abgespielt wird.
Wie kann ich meine Animation bis zum Ende abspielen lassen, auch wenn ich die Highlight-Klasse lösche?
一种可能的方法是向元素添加一个data-属性，然后向其添加一个animationend事件监听器，以便在动画完成时，事件监听器知道要移除该类。请参见下面的示例。
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; } }