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的loading动画加载相关的transition优化
May 18 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 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
简单的php文件上传(实例)
2013/10/27 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
JavaScript错误处理
2015/02/03 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
10款最好的Python开发编辑器
2019/07/03 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
益模软件Java笔试题
2012/03/27 面试题
资料员岗位职责
2013/11/17 职场文书
运动会广播稿200米
2014/01/27 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
小学生春游活动方案
2014/08/20 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
MySQL 开窗函数
2022/02/15 MySQL
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android