Di era CSS3, CSS3-animasi dimungkinkan;
JS tradisional dapat menentukan apakah animasi berakhir melalui fungsi callback; Bahkan jika teknologi CSS digunakan untuk menghasilkan efek animasi, JavaScript masih dapat menangkap acara akhir animasi atau transformasi;
Acara Transitionend Acara dan Acara Animationend Acara Browser Standar, tetapi di Browser Webkit Anda masih perlu menggunakan awalan WebKit, jadi kami harus mendeteksi acara secara terpisah menurut berbagai browser
Salinan kode adalah sebagai berikut:
var transitions = {
'Transisi': 'Transitionend',
'Otransition': 'otransitionend',
'Moztransition': 'transitionend',
'WebKittransition': 'WebKittransitionend'
}
Kode sumber dilampirkan di bawah ini:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> SUFACE JS menentukan apakah animasi CSS berakhir </iteme>
</head>
<body>
<p> Segera setelah animasi atau transformasi selesai, fungsi callback akan dipecat. Dukungan perpustakaan kelas besar tidak lagi diperlukan. <br> </p>
<type style = "text/css">
.sample {
Lebar: 200px;
Tinggi: 200px;
Perbatasan: 1px Solid Green;
Latar Belakang: Lightgreen;
Opacity: 1;
margin-bottom: 20px;
Transisi-Property: Opacity;
/*durasi transisi: .5s;*/
Durasi transisi: 3s;
}
.sample.hide {
Opacity: 0;
}
</tyle>
<div> animasi CSS3 terlalu tersembunyi (transisi-durasi: 3s;) </div>
<p> <tombol onClick = "this.style.display = 'none'; startFade ();"> perlahan memudar, acara akhir deteksi </button> </p>
<script>
(fungsi() {
var e = document.getElementsbyclassName ('sampel') [0];
Fungsi WhatTransitionEvent () {
var t;
var el = document.createElement ('FakeElement');
var transitions = {
'Transisi': 'Transitionend',
'Otransition': 'otransitionend',
'Moztransition': 'transitionend',
'WebKittransition': 'WebKittransitionend'
}
untuk (t dalam transisi) {
if (el.style [t]! == tidak terdefinisi) {
mengembalikan transisi [t];
}
}
}
var transitionEvent = whattransitionEvent ();
TransitionEvent && E.AdDeventListener (TransitionEvent, function () {
Peringatan ('Gerakan CSS3 berakhir! Saya adalah fungsi panggilan balik, tidak ada pustaka kelas pihak ketiga yang digunakan!');
});
startFade = function () {
E.ClassName+= 'Sembunyikan';
}
}) (); <br> </script>
</body>
</html>
Di atas adalah metode yang dijelaskan dalam artikel ini tentang JavaScript untuk menilai akhir animasi CSS3. Saya harap semua orang menyukainya