Cara untuk menghalang animasi CSS daripada berhenti apabila mengalih keluar kelas

Question

Saya mempunyai grid. Apabila saya menerima mesej kemas kini daripada bahagian belakang, saya perlu menyerlahkan baris dalam oren dalam masa 3 saat. Apabila saya menerima kemas kini, saya menambah kelas css 'highlight' ke baris saya dan memainkan animasi saya.

.highlight {
  animasi-nama: highlight;
  tempoh animasi: 3s;
}

@keyframes highlight {
  0% {
    warna latar belakang: oren;
  }

  99.99% {
    warna latar belakang: oren;
  }
}

Disebabkan oleh sebab tertentu dengan aliran mesej dalam aplikasi, saya perlu mengalih keluar kelas serlahan sebelum 3 saat tamat supaya animasi saya berhenti berfungsi. Saya mahu animasi saya dimainkan sehingga penghujung 3 saat.

Bagaimanakah saya boleh membuat animasi saya dimainkan sehingga akhir walaupun saya memadamkan kelas kemuncak?

Answer 1

Satu pendekatan yang mungkin ialah menambah atribut data pada elemen dan kemudian menambah pendengar acara akhir animasi padanya supaya apabila animasi selesai, pendengar acara tahu untuk mengalih keluar kelas. Lihat contoh di bawah.

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>