http://www.jb51.net/css/258407.html

这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下

我们在做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页面时用到了，总结一下。

CSS3动画效果——js调用css动画属性并回调处理详解的更多相关文章

  1. Android 动画之View动画效果和Activity切换动画效果

    View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节点 ...

  2. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  3. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  4. JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数

    封装缓动(变速)动画函数---增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画 & ...

  5. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

  6. [概念] js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

  7. CSS进阶内容—浮动和定位详解

    CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...

  8. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  9. 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

随机推荐

  1. iptables原理详解以及功能说明

    原文:http://www.svipc.com/thread-450-1-1.html 前言   iptables其实就是Linux下的一个开源的信息过滤程序,包括地址转换和信息重定向等功能的,他由四 ...

  2. HDFS读写程序小测试

    WriteHdfs: package aa; import java.io.*; import org.apache.hadoop.conf.Configuration; import org.apa ...

  3. 使用compass更高效的编辑css －－－ 图片精灵

    compass是sass的一个库,关系相当于js中的jq.比较可惜的是compass的文档比较混乱 看的不太舒服,下面是compass的文档地址,有兴趣的可以去看看 http://compass-st ...

  4. myeclipse导出javadoc时特殊字符 尖括号

    源字符<?xml version="1.0" encoding="UTF-8" standalone="yes"?> javad ...

  5. UIApplication 用法解析

    UIApplication,代表的是整个应用做的事,因此每个程序只能有一个,系统使用的是单例模式,就是上面的[UIApplication sharedApplication]来得到一个实例.这个单例实 ...

  6. FZU Problem 2029 买票问题（树状数组）

    当我看到题目是5秒的时候,压根没有想树状数组,一直奔着模拟队列去想了,最后也没搞定,赛后看到大神的题解才恍然大悟,原来如此,题目中有明显的暗示,求前n项和,骤然感叹,自己太low... 果然还是要多做 ...

  7. HDU 3339 最短路+01背包

    In Action Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  8. 那些学些网址_jquery初学知识

    http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html(ajax)http://www.enet.com.cn ...

  9. Struts2不配置result参数 进行跳转实现

    的 this.getRequest().getRequestDispatcher("url").forward(this.getRequest(),this.getResponse ...

  10. Mysql update语句赋值嵌套与在表列中数据后面增加数据

    1.Mysql update语句赋值嵌套select  点击(此处)折叠或打开 update a set col=(select col from a where id='5') where id&g ...