浅谈CSS3动画的回调处理

我们在做js动画的时候,很多时候都需要做回调处理,如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等,但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢?

CSS3动画也是可以做回调处理的,这里分为两个属性,一个是transition[w3c文档],另外一个是animation[w3c文档]。

1、transition

对于transition,可以监听transitionend事件,当动画完成时触发,可以这样使用:

XML/HTML Code复制内容到剪贴板 <!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动画的回调处理