recherche

Maison  >  Questions et réponses  >  le corps du texte

Un moyen d'empêcher l'animation CSS de s'arrêter lors de la suppression d'une classe

<p>J'ai une grille. Lorsque je reçois un message de mise à jour du backend, je dois mettre en surbrillance les lignes en orange dans les 3 secondes. Lorsque je reçois une mise à jour, j'ajoute la classe CSS « ​​surligner » à ma ligne et je joue mon animation. </p> <p> <pre class="brush:css;toolbar:false;">.highlight { nom de l'animation : surligner ; durée de l'animation : 3 s ; } @keyframes surligner { 0% { couleur de fond : orange ; } 99,99 % { couleur de fond : orange ; } }</pré> </p> <p>Pour une raison quelconque liée au flux de messages dans l'application, je dois supprimer la classe de surbrillance avant la fin des 3 secondes afin que mon animation cesse de fonctionner. Je veux que mon animation soit jouée jusqu'à la fin des 3 secondes. </p> <p>Comment puis-je faire jouer mon animation jusqu'à la fin même si je supprime la classe de surbrillance ? </p>
P粉412533525P粉412533525456 Il y a quelques jours514

répondre à tous(1)je répondrai

  • P粉265724930

    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>

    répondre
    0
  • Annulerrépondre