Native CSS animation callback event

 
In 2014, there was a hard-to-Admit fact for my web development career, that is, the traditional JavaScript tool library was almost dead. We have been relying on tool libraries for development for many years, but now JavaScript and CSS have provided the vast majority of features we need. if we calm down and study these native functions, we can reduce the use of the JavaScript tool library. I often hear that the reason for sticking to the tool library is that CSS animation does not provide callback.

Wrong. False. Incorrect. Duplicate Que? JavaScript does provide the function of triggering callback after JS animation and transition.

Click here to view the example!

JavaScript code
The only reason that this JavaScript segment is involved is the browser prefix. The transitionend event and the animationend event are used by the standard browser, but the webkit-based browser still relies on the prefix. Therefore, we must first determine the prefix of the event before calling:

/* From Modernizr */function whichTransitionEvent () {var t; var el = document. createElement ('fakeelement'); var transitions = {'transition ': 'transitionend', 'otransition': 'otransitionend', 'offline transition ': 'transitionend', 'webkittransition ': 'webkittransitionend', 'mstransition ': 'mstransitionend'} for (t in transitions) {if (el. style [t]! = Undefined) {return transitions [t] ;}}/ * listens for transition! */Var transitionEvent = whichTransitionEvent (); transitionEvent & e. addEventListener (transitionEvent, function () {console. log ('transition completed! Native JavaScript callback execution! ');});/* In whichTransitionEvent, you can replace the transition text with the animation, and the animation is processed. The code is omitted here ...)*/

After the animation/transition effect is completed, the callback function will be triggered, because it can be implemented without the support of those heavyweight class libraries, which should be very useful in many cases.
Imagine how much we can save without using a class library. for example, duration, fill-mode, and delay can all be set through CSS. As a result, JavaScript will become more lightweight and feel a better life!