Javascript-based callback function for determining the end of a css3 animation-javascript tips-js tutorial

This article mainly introduces how to use javascript to determine the end Of the CSS3 animation. It mainly uses javascript callback functions. The idea is that the callback function will be triggered once the animation or transformation ends. Large class libraries are no longer needed. It is very simple and practical and recommended to you. In the css3 era, css3 -- animation is all possible;

Traditional JavaScript can use callback functions to determine whether the animation ends. Even if CSS technology is used to generate the animation effect, JavaScript can still capture the animation or transform the ending event;

The transitionend event and the standard browser event of the animationend event, but you still need to use the WebKit prefix in the webkit browser, so we have to detect the event separately based on various browsers

The Code is as follows:

Var transitions = {
'Transition ': 'transitionend ',
'Ostransition ': 'ostransitionend ',
'Upload upload': 'deletionend ',
'Webkitupload': 'webkittransitionend'
}

The source code is attached below:

The Code is as follows:

Suface js determines whether css animation ends

Once the animation or transform ends, the callback function is triggered. Large class libraries are no longer needed.

Css3 animation is slowly hidden over time (transition-duration: 3 s ;)

Slowly fade away and detect the ending event

Script
(Function (){
Var e = document. getElementsByClassName ('sample') [0];
Function whichTransitionEvent (){
Var t;
Var el = document. createElement ('fakeelement ');
Var transitions = {
'Transition ': 'transitionend ',
'Ostransition ': 'ostransitionend ',
'Upload upload': 'deletionend ',
'Webkitupload': 'webkittransitionend'
}
For (t in transitions ){
If (el. style [t]! = Undefined ){
Return transitions [t];
}
}
}
Var transitionEvent = whichTransitionEvent ();
TransitionEvent & e. addEventListener (transitionEvent, function (){
Alert ('css3 motion ends! I am a callback function and have not used a third-party class library! ');
});
StartFade = function (){
E. className + = 'hide ';
}
})();
Script

The above is the javascript method described in this article to determine the end Of the CSS3 animation. I hope you will like it.