国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

<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>

document.getElementById('clicky').addEventListener('click', () => {
  const element=document.querySelector('.highlight');
  element.setAttribute('data-remove-class', 'highlight');
  element.innerHTML='將在動(dòng)畫結(jié)束時(shí)移除類';
});

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'>正在動(dòng)畫中！</div>
<button id='clicky'>移除類</button>