The method of callback processing in CSS3 Animation
This article mainly introduces the relevant knowledge of "CSS3 animation callback processing method". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this "CSS3 animation callback processing method" article can help you solve the problem.
CSS3 animation can also do callback processing, here is divided into two properties, one is transition [W3C document], the other is animation [W3C document].
1 、 transition
For transition, you can listen for transitionend events, which are triggered when the animation is complete, and you can use:
The code is as follows:
Css3-transitionend-BeyondWeb
* {margin: 0; padding: 0;}
.rect {
Width: 100px
Height: 100px
Background-color: # f80
-webkit-transition: all .5s
}
_ window.onload = function () {
Var _ rect = document.querySelector ('.rect')
_ rect.onclick = function () {
_ rect.style.webkitTransform = 'translateX (300px)'
}
_ rect.addEventListener ('webkitTransitionEnd', function () {
Alert ('Animation finished!')
/ / callback here
}, false)
}
2 、 animation
For animation, we can listen to animationend events. The sample code is as follows:
Css3-animationend-BeyondWeb
* {margin: 0; padding: 0;}
.rect {
Position: relative
Width: 100px
Height: 100px
Background-color: # f80
}
@-webkit-keyframes move {
From {
-webkit-transform: rotate (0)
}
To {
-webkit-transform: rotate (360deg)
}
}
_ window.onload = function () {
Var _ rect = document.querySelector ('.rect')
_ rect.onclick = function () {
_ rect.style.webkitAnimation = 'move 3s'
}
_ rect.addEventListener ('webkitAnimationEnd', function () {
Alert ('Animation finished!')
/ / callback here
}, false)
}
This is the end of the content about "the method of handling callback of CSS3 animation". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
