Bagaimanakah Saya Boleh Mengawal Penyiapan Animasi CSS3 dengan Tepat dan Mengalih Keluar Elemen Selepas Bingkai Akhir?

Mengawal Penyiapan Animasi CSS3

Dalam bidang pembangunan web, animasi CSS3 telah menjadi alat yang berkuasa untuk meningkatkan pengalaman pengguna. Walau bagaimanapun, apabila mereka bentuk animasi yang memerlukan kawalan tepat ke atas keadaan akhir mereka, menghentikannya pada bingkai terakhir boleh menimbulkan cabaran.

Artikel ini menangani senario sedemikian, di mana animasi CSS3 berbilang bahagian dimainkan pada klik, dengan bahagian akhir bertujuan untuk mengeluarkan div dari skrin. Malangnya, animasi terus kembali kepada keadaan asalnya. Untuk menyelesaikan isu ini, kami meneroka dua penyelesaian:

1. Membekukan Animasi pada Bingkai Terakhir:

Untuk membekukan animasi pada bingkai terakhirnya (100% siap), kami menggunakan sifat CSS animation-fill-mode: forwards; . Arahan ini mengarahkan penyemak imbas untuk mengekalkan keadaan animasi akhir walaupun selepas animasi telah tamat.

2. Mengalih keluar Div selepas Animasi:

Sebagai alternatif, jika mengalih keluar div sepenuhnya dikehendaki, kami boleh menggunakan JavaScript untuk mengalih keluar elemen daripada DOM selepas animasi dimainkan. Ini boleh dicapai dengan urutan berikut:

document.getElementById("myDiv").addEventListener("animationend", function() {
  this.parentNode.removeChild(this);
});

Apabila animasi selesai, peristiwa "animationend" dicetuskan, menyebabkan div dialih keluar daripada halaman.

Contoh:

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

#myDiv {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
}

Dalam contoh ini, div dengan ID "myDiv" mengalami animasi yang diakhiri dengan perubahan skala dan putaran. Dengan menetapkan "mod-isi-animasi: ke hadapan;", keadaan akhir dikekalkan selepas animasi tamat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Penyiapan Animasi CSS3 dengan Tepat dan Mengalih Keluar Elemen Selepas Bingkai Akhir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!