suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Möglichkeit, zu verhindern, dass die CSS-Animation beim Entfernen einer Klasse stoppt

<p>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. </p> <p> <pre class="brush:css;toolbar:false;">.highlight { Animationsname: hervorheben; Animationsdauer: 3s; } @keyframes markieren { 0 % { Hintergrundfarbe: Orange; } 99,99 % { Hintergrundfarbe: Orange; } }</pre> </p> <p>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. </p> <p>Wie kann ich meine Animation bis zum Ende abspielen lassen, auch wenn ich die Highlight-Klasse lösche? </p>
P粉412533525P粉412533525456 Tage vor513

Antworte allen(1)Ich werde antworten

  • P粉265724930

    P粉2657249302023-08-30 15:52:56

    一种可能的方法是向元素添加一个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;
      }
    }
    <div class='highlight'>正在动画中!</div>
    <button id='clicky'>移除类</button>

    Antwort
    0
  • StornierenAntwort