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模块的目前的状况分析
Feb 24 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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中GET变量的使用
2006/10/09 PHP
MySQL修改密码方法总结
2008/03/25 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
python接口自动化框架实战
2020/12/23 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
《值日生》教学反思
2014/02/17 职场文书
暑假家长评语大全
2014/04/17 职场文书
学生实习证明范文
2014/09/28 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python