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.