脚本宝典收集整理的这篇文章主要介绍了浅谈CSS3动画的回调处理，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？
CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transITion[w3c文档]，另外一个是animation[w3c文档]。
1、transition
对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>css3-transitionend - BeyondWeb</title>
- <style>
- * {margin: 0; padding: 0;}
- .rect {
- width: 100px;
- height: 100px;
- background-color: #f80;
- -webkit-transition: all .5s;
- }
- </style>
- <script>
- window.onload = function () {
- VAR _rect = document.querySelector('.rect');
- _rect.onclick = function () {
- _rect.style.webkitTransform = 'translatex(300px)';
- }
-
- _rect.addEventListener('webkitTransitionEnd', function () {
- alert('动画执行完毕！');
- // callback here
- }, false);
- }
- </script>
- </head>
- <body>
- <div class="rect"></div>
- </body>
- </html>
2、animation
对于animation我们可以监听animationend事件，示例代码如下：
XML/HTML Code复制内容到剪贴板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>css3-animationend - BeyondWeb</title>
- <style>
- * {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);
- }
- }
- </style>
- <script>
- window.onload = function () {
- var _rect = document.querySelector('.rect');
- _rect.onclick = function () {
- _rect.style.webkitAnimation = 'move 3s';
- }
-
- _rect.addEventListener('webkitAnimationEnd', function () {
- alert('动画执行完毕！');
- // callback here
- }, false);
- }
- </script>
- </head>
- <body>
- <div class="rect"></div>
- </body>
- </html>
就是关于CSS3动画回调处理的一些内容，最近在做H5页面时用到了，总结一下。
以上这篇浅谈CSS3动画的回调处理就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本宝典。
原文地址：http://www.cnblogs.COM/andROIdshouce/Archive/2016/07/21/5690438.html
脚本宝典总结
以上是脚本宝典为你收集整理的浅谈CSS3动画的回调处理全部内容，希望文章能够帮你解决浅谈CSS3动画的回调处理所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。