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

防止CSS動畫在移除類時停止的方法
P粉412533525
P粉412533525 2023-08-29 16:15:06
0
1
653
<p>我有一個網格。 當我從后端收到更新消息時,我需要在3秒內用橙色突出顯示行。 當我收到更新時,我將css類'highlight'添加到我的行中并播放我的動畫。</p> <p> <pre class="brush:css;toolbar:false;">.highlight { animation-name: highlight; animation-duration: 3s; } @keyframes highlight { 0% { background-color: orange; } 99.99% { background-color: orange; } }</pre> </p> <p>由于應用程序中消息流的某些原因,我需要在3秒結束之前移除highlight類,這樣我的動畫就會停止工作。我希望我的動畫能一直播放到3秒結束。</p> <p>如何使我的動畫即使我刪除了highlight類也能播放到結束?</p>
P粉412533525
P粉412533525

全部回復(1)
P粉265724930

一種可能的方法是向元素添加一個data-屬性,然后向其添加一個animationend事件監(jiān)聽器,以便在動畫完成時,事件監(jiān)聽器知道要移除該類。請參見下面的示例。

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>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板