In the era of css3, css3-animation is possible;
Traditional js can determine whether the animation ends through callback functions; even if CSS technology is used to generate animation effects, JavaScript can still capture the ending event of animation or transformation;
transitionend event and animationend event standard browser events, but in WebKit browser you still need to use webkit prefix, so we have to detect events separately according to various browsers
The code copy is as follows:
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
The source code is attached below:
The code copy is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>suface js determines whether the css animation ends</title>
</head>
<body>
<p>As soon as the animation or transformation is finished, the callback function will be fired. Large class library support is no longer needed. <br> </p>
<style type="text/css">
.sample {
width: 200px;
height: 200px;
border: 1px solid green;
background: lightgreen;
opacity: 1;
margin-bottom: 20px;
transition-property: opacity;
/*transition-duration: .5s;*/
transition-duration:3s;
}
.sample.hide {
opacity: 0;
}
</style>
<div>css3 animation is too overly hidden (transition-duration:3s;)</div>
<p><button onclick="this.style.display='none';startFade();">Slowly fades, detection end event</button></p>
<script>
(function() {
var e = document.getElementsByClassName('sample')[0];
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];
}
}
}
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
alert('css3 movement ends! I'm a callback function, no third-party class library is used!');
});
startFade = function() {
e.className+= ' hide';
}
})();<br></script>
</body>
</html>
The above is the method described in this article about javascript to judge the end of CSS3 animation. I hope everyone likes it