Maison > Questions et réponses > le corps du texte
P粉2657249302023-08-30 15:52:56
Une approche possible serait d'ajouter un attribut de données à l'élément, puis d'y ajouter un écouteur d'événement animationend afin que lorsque l'animation se termine, l'écouteur d'événement sache qu'il faut supprimer la classe. Voir exemple ci-dessous.
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>