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 相关文章推荐
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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 win下Socket方式发邮件类
2009/08/21 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
python生成词云的实现方法(推荐)
2017/06/13 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
超简单的Python HTTP服务
2019/07/22 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
运行Python编写的程序方法实例
2020/10/21 Python
几道数据库的概念性面试题
2014/05/30 面试题
实习生体会的自我评价范文
2013/11/28 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript