首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

浅谈CSS3动画的回调处理

Posted in HTML / CSS onJuly 21, 2016

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

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

1、transition

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>css3-transitionend - BeyondWeb</title>  
  6.     <style>  
  7.         * {margin: 0; padding: 0;}   
  8.         .rect {   
  9.             width: 100px;   
  10.             height: 100px;   
  11.             background-color: #f80;   
  12.             -webkit-transition: all .5s;   
  13.         }   
  14.     </style>  
  15.     <script>  
  16.         window.onload = function () {   
  17.             var _rect = document.querySelector('.rect');   
  18.             _rect.onclick = function () {   
  19.                 _rect.style.webkitTransform = 'translateX(300px)';   
  20.             }   
  21.   
  22.             _rect.addEventListener('webkitTransitionEnd', function () {   
  23.                 alert('动画执行完毕！');   
  24.                 // callback here   
  25.             }, false);   
  26.         }   
  27.     </script>  
  28. </head>  
  29. <body>  
  30.     <div class="rect"></div>  
  31. </body>  
  32. </html>  

2、animation

对于animation我们可以监听animationend事件，示例代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>css3-animationend - BeyondWeb</title>  
  6.     <style>  
  7.         * {margin: 0; padding: 0;}   
  8.         .rect {   
  9.             position: relative;   
  10.             width: 100px;   
  11.             height: 100px;   
  12.             background-color: #f80;   
  13.         }   
  14.   
  15.         @-webkit-keyframes move {   
  16.             from {   
  17.                 -webkit-transform: rotate(0);   
  18.             }   
  19.             to {   
  20.                 -webkit-transform: rotate(360deg);   
  21.             }   
  22.         }   
  23.     </style>  
  24.     <script>  
  25.         window.onload = function () {   
  26.             var _rect = document.querySelector('.rect');   
  27.             _rect.onclick = function () {   
  28.                 _rect.style.webkitAnimation = 'move 3s';   
  29.             }   
  30.   
  31.             _rect.addEventListener('webkitAnimationEnd', function () {   
  32.                 alert('动画执行完毕！');   
  33.                 // callback here   
  34.             }, false);   
  35.         }   
  36.     </script>  
  37. </head>  
  38. <body>  
  39.     <div class="rect"></div>  
  40. </body>  
  41. </html>  

就是关于CSS3动画回调处理的一些内容，最近在做H5页面时用到了，总结一下。

以上这篇浅谈CSS3动画的回调处理就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690438.html

浅谈CSS3动画的回调处理

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
浅谈css3中的前缀
Jul 20 #HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 #HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 #HTML / CSS
CSS3实现时间轴效果
Jul 11 #HTML / CSS
CSS3实现10种Loading效果
Jul 11 #HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 #HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 #HTML / CSS
postcss-px2rem(1) sql模式(1) lua(3) geoserver(1) into outfile(1) 匹配(1) 全表扫描(1) 绝对定位(1) 相对定位(1) 索引树扫描(1)
You might like
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php数组添加元素方法小结
2014/12/20 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python实现多进程的四种方式
2019/02/22 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Python for循环及基础用法详解
2019/11/08 Python
Python实现自动访问网页的例子
2020/02/21 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
爱尔兰电脑、家电和家具购物网站：Buy It Direct
2019/07/09 全球购物
阿尔卡特（中国）的面试题目
2014/08/20 面试题
好人好事事迹材料
2014/02/12 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
交通事故协议书范文
2014/04/16 职场文书
学术会议邀请函
2015/01/30 职场文书