Bagaimanakah Saya Boleh Mengesan Penyiapan Peralihan CSS?

Panggil balik pada Peralihan CSS

Pertanyaan: Bolehkah seseorang menerima pemberitahuan apabila peralihan CSS telah selesai?

Jawapan : Dalam penyemak imbas yang menyokong panggilan balik, peristiwa dicetuskan setelah peralihan selesai. Acara ini berbeza-beza antara pelayar:

• Webkit (Chrome, Safari): webkitTransitionEnd
• Firefox: transitionend
• IE9 : msTransitionEnd
• Opera: oTransitionEnd

WebKit TransitionEnd Issue

Berhati-hati bahawa webkitTransitionEnd mungkin tidak selalu mencetuskan. Ini berlaku apabila animasi tidak mempunyai kesan yang kelihatan pada elemen. Untuk mengatasi masalah ini, pertimbangkan tamat masa untuk memecat pengendali acara jika acara tidak dicetuskan seperti yang dijangkakan.

Struktur Kod Disyorkan

var transitionEndEventName = "XXX"; // Specify the appropriate event name
var elemToAnimate = ... // Element to be animated
var done = false;
var transitionEnded = function() {
    done = true;
    // Code to execute when transition finishes
    elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Animation triggering code here

// Fallback for browsers without event notifications
setTimeout(function() {
    if (!done) {
        transitionEnded();
    }
}, XXX); // Calculate XXX based on animation time and grace period

Nota : Rujuk "Bagaimana cara saya menormalkan fungsi Transisi CSS3 merentas pelayar?" untuk menormalkan nama acara peralihan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Penyiapan Peralihan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!