Callback pada transisi CSS

Apakah mungkin untuk mendapatkan pemberitahuan (seperti panggilan balik) ketika transisi CSS telah selesai?

Saya tahu bahwa Safari mengimplementasikan callback webkitTransitionEnd yang dapat Anda lampirkan langsung ke elemen dengan transisi.

Contoh mereka (diformat ulang menjadi beberapa baris):

box.addEventListener( 
     'webkitTransitionEnd', 
     function( event ) { 
         alert( "Finished transition!" ); 
     }, false );

Ya, jika hal-hal seperti itu didukung oleh browser, maka sebuah peristiwa akan dipicu saat transisi selesai. Namun, acara sebenarnya berbeda di antara browser:

• Penggunaan browser Webkit (Chrome, Safari) webkitTransitionEnd
• Firefox menggunakan transitionend
• IE9 + menggunakan msTransitionEnd
• Opera menggunakan oTransitionEnd

Bagaimanapun Anda harus sadar bahwa webkitTransitionEndtidak selalu menembak! Hal ini telah membuat saya bingung beberapa kali, dan tampaknya terjadi jika animasi tidak berpengaruh pada elemen. Untuk menyiasatinya, masuk akal untuk menggunakan waktu tunggu untuk mengaktifkan penangan peristiwa jika tidak dipicu seperti yang diharapkan. Entri blog tentang masalah ini tersedia di sini: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 Internal Server Error

Dengan pemikiran ini, saya cenderung menggunakan acara ini dalam potongan kode yang terlihat seperti ini:

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

Catatan: untuk mendapatkan nama akhir peristiwa transisi, Anda dapat menggunakan metode yang diposting sebagai jawaban di: Bagaimana cara menormalkan fungsi Transisi CSS3 di seluruh browser? .

Catatan: pertanyaan ini juga terkait dengan: - Peristiwa transisi CSS3

Saya menggunakan kode berikut, jauh lebih sederhana daripada mencoba mendeteksi peristiwa akhir tertentu yang digunakan browser.

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

Atau jika Anda menggunakan bootstrap maka Anda dapat melakukannya

$(".myClass").one($.support.transition.end,
function() {
 //do something
});

Ini karena mereka menyertakan yang berikut ini di bootstrap.js

+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      'WebkitTransition' : 'webkitTransitionEnd',
      'MozTransition'    : 'transitionend',
      'OTransition'      : 'oTransitionEnd otransitionend',
      'transition'       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false, $el = this
    $(this).one($.support.transition.end, function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()
  })

}(jQuery);

The jQuery.transit Plugin , plugin untuk transformasi CSS3 dan transisi, dapat menghubungi animasi CSS Anda dari script dan memberikan panggilan balik.

Ini dapat dengan mudah dicapai dengan transitionendAcara, lihat dokumentasi di sini . Contoh sederhana:

document.getElementById("button").addEventListener("transitionend", myEndFunction);

function myEndFunction() {
	this.innerHTML = "Transition event ended";
}

#button {transition: top 2s; position: relative; top: 0;}

<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>