Detekce dokončení animace CSS pomocí JavaScriptu

Jeden fakt ze života vývoje webu v roce 2014, který pro mě bylo těžké přiznat, je, že tradiční sada nástrojů JavaScript je většinou mrtvá. Po léta jsme se na ně spoléhali téměř ve všem, ale nyní, když JavaScript a CSS dohnaly to, co potřebujeme, se často můžeme vyhnout používání sad nástrojů JavaScript, pokud si uděláme čas na výzkum nových nativních funkcí. Jedním z argumentů, proč zůstat u sad nástrojů, který často slýchám, je, že animace CSS neposkytují možnosti zpětného volání.

Špatně. Nepravdivé. Nesprávný. Dotaz? JavaScript nám poskytuje možnost spouštět funkce na konci animací a přechodů CSS. Zde je návod!

Zobrazit ukázku

JavaScript

Jediným důvodem, proč je to v tomto bodě poněkud obtížný úkol, je potřeba počítat s předponami prohlížeče. transitionend událost a animationend je to, co standardizované prohlížeče vyžadují, ale prohlížeče založené na WebKitu stále spoléhají na předpony, takže musíme určit předponu události a poté ji použít:

/* From Modernizr */
function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
	console.log('Transition complete!  This is the callback, no library needed!');
});

/*
	The "whichTransitionEvent" can be swapped for "animation" instead of "transition" texts, as can the usage :)
*/

Jakmile animace nebo přechod skončí, spustí se zpětné volání. Už není potřeba velká knihovna k přiřazení zpětných volání k animacím!

Zobrazit ukázku

Představte si, kolik v kódu JavaScript můžete ušetřit tím, že se vyhnete knihovně JavaScript. Trvání, režim plnění a zpoždění lze nastavit pomocí CSS, takže váš JavaScript zůstane lehký. Hlavní vítězství!