我有一个网格。 当我从后端收到更新消息时，我需要在3秒内用橙色突出显示行。 当我收到更新时，我将css类'highlight'添加到我的行中并播放我的动画。
1
1023.highlight {
animation-name: highlight;
animation-duration: 3s;
}
@keyframes highlight {
0% {
background-color: orange;
}
99.99% {
background-color: orange;
}
}
由于应用程序中消息流的某些原因，我需要在3秒结束之前移除highlight类，这样我的动画就会停止工作。我希望我的动画能一直播放到3秒结束。
如何使我的动画即使我删除了highlight类也能播放到结束？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
一种可能的方法是向元素添加一个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; } }