CSS3动画效果回调处理详解


Posted in HTML / CSS onDecember 10, 2014

我们在做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)';
}</p> <p> _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;
}</p> <p> @-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';
}</p> <p> _rect.addEventListener('webkitAnimationEnd', function () {
alert('动画执行完毕!');
// callback here
}, false);
}
</script>
</head>
<body>
<div class="rect"></div>
</body>
</html>

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

HTML / CSS 相关文章推荐
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
CSS3属性background-size使用指南
Dec 09 #HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 #HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 #HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 #HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 #HTML / CSS
css3的transform中scale缩放详解
Dec 08 #HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 #HTML / CSS
You might like
Views rows style模板重写代码
2011/05/16 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python学习小技巧总结
2018/06/10 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python关于调用函数外的变量实例
2019/12/26 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Python requests模块session代码实例
2020/04/14 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
软件工程师岗位职责
2013/11/16 职场文书
西湖英语导游词
2015/02/06 职场文书
2015毕业寄语大全
2015/02/26 职场文书
2015年人事科工作总结
2015/04/28 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
公司借款担保书
2015/09/22 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技