我们在做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事件，示例代码如下：

<!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动画的回调处理的更多相关文章

  1. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  2. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  3. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  4. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  5. CSS3动画（个人理解）

    随着学习的深入,越来越觉得Css3动画的重要,虽然JQ自定义动画和动画回调函数必须掌握,但是css3动画做起来更加绚丽,更加方便!1.常规使用1.1 使用transition属性,一般我们是配合hov ...

  6. jQuery Animation实现CSS3动画

    jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:3 ...

  7. CSS3动画与JS动画的优缺点？

    JS动画: 缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况. 2.JS动画代码复杂度高于CSS3动画. 优点: ...

  8. CSS3动画和JS动画的比较

    前言 之前有被问到一个问题,css3动画和js动画性能谁更好,为什么.据我的经验,当然觉得css3动画性能更好,至于为什么一时还真答不上来,所以特意查了一下资料总结一波. JS动画 优点: js动画控 ...

  9. css3动画与js动画的区别

    css与 js动画 优缺点比较   我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其 ...

随机推荐

  1. 【BZOJ 4818】 4818: [Sdoi2017]序列计数 （矩阵乘法、容斥计数）

    4818: [Sdoi2017]序列计数 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 560  Solved: 359 Description Al ...

  2. AFO 我的oi生涯 大结局

    今儿个哥几个一屋子退役了,这两天也许会写一个生涯大结局留作纪念吧. 今天就写了吧. 由于在机房的原因比一般同学获得的知识更多一些.进来总是看新闻,感慨颇多.自从两会开的第一天起,我就对我们政府采取的一 ...

  3. 喵哈哈村的魔法考试 Round #6 (Div.3) 题解

    有任何问题 直接联系QQ:475517977 喵哈哈村的代码传说 第一章 冒泡排序 第一题就是排序嘛,在ACM/OI竞赛中,我只推崇一种排序方法,就是直接调用algorithm里面的sort函数. # ...

  4. QThreadPool线程池的开发使用

    QThreadPool+QRunnable线程池与QThread线程两种方式使用的场景不同,QThreadPool+QRunnable线程池主要用于那种不需要一直运行的任务,而QThread主要用于长 ...

  5. haskell学习资料

    Haskell基础语法 Real World Haskell 中文版 Haskell趣学指南

  6. 使用 IntraWeb (23) - 基本控件之 TIWTimer、TIWProgressBar、TIWProgressIndicator、TIWTimeEdit

    TIWTimer //和 TTimer 没多大区别, 它的默认事件现在是异步的(OnAsyncTimer), 在网络上使用 OnTimer 肯定是非常糟糕的 TIWProgressBar //进度条 ...

  7. 调试工具BTrace 的使用--例子

    http://www.cnblogs.com/serendipity/archive/2012/05/14/2499840.html

  8. 我来科普一下为毛很多人升级了20M的电信光纤宽带反而感觉速度更卡了

    下载(在线看视频,看网页,下载游戏这类都是属于下载类应用) 为毛很多人升级20M光纤更慢了呢? 因为电信对你的上传速度做了手脚, 8M以及以上家用光纤宽带全部上传限速到100KB/s  也就是1M带宽 ...

  9. 两次被百度k站两次恢复的亲身经历

    最后,网站被k了并不是最重要的,最重要的是你能不能找到网站被k的病因所在,不知道病因的话,就盲目的优化,恢复起来可能效果就不太明显,也比较浪费时间.只有找到了被k的原因,这样恢复起来才会得心应手,省时 ...

  10. mysql主从同步失败Last_IO_Error: Got fatal error 1236 from master解决方法

    mysql教程主从同步失败Last_IO_Error: Got fatal error 1236 from master解决方法 遇到这样的错误如:“Last_IO_Error: Got fatal ...