JavaScript determines the end of css3 animation. Callback function for css3 animation end_javascript skills

In the era of css3, everything is possible with css3--animation;

Traditional js can determine whether the animation ends through the callback function; even if CSS technology is used to generate animation effects, JavaScript can still capture the end event of animation or transformation;

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

Copy code The code is as follows:

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

The source code is attached below:

Copy code The code is as follows:

The callback function fires once the animation or transformation ends. Large class library support is no longer required.

css3 animation transition is slowly hidden (transition-duration:3s;)

Slowly fade away, detect the end event

<script>                                                                      (function() {<br> var e = document.getElementsByClassName('sample')[0];<br> function whichTransitionEvent(){<br> var t;<br>       var el = document.createElement('fakeelement');<br>       var transitions = {<br>           'transition':'transitionend',<br>          'OTransition':'oTransitionEnd',<br>           'MozTransition':'transitionend',<br>           'WebkitTransition':'webkitTransitionEnd'<br> }<br> for(t in transitions){<br> If( el.style[t] !== undefined ){<br>                  return transitions[t];<br>            }<br> }<br> }<br> var transitionEvent = whichTransitionEvent();<br> transitionEvent && e.addEventListener(transitionEvent, function() {<br> alert('css3 movement is over! I am a callback function and do not use a third-party library!');<br> });<br> StartFade = function() {<br> e.className = 'hide';<br> }<br> })();<br></script>

The above is the method of judging the end of CSS3 animation with javascript described in this article. I hope you will like it