CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html
这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下
我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？
CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。
1、transition
对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：
代码如下:
<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事件，示例代码如下：
代码如下:
<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动画属性并回调处理详解的更多相关文章
- Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节点 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数
封装缓动(变速)动画函数---增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画 & ...
- js实现的新闻列表垂直滚动实现详解
js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...
- [概念] js的函数节流和throttle和debounce详解
js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）
一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...
随机推荐
- TIdTCPClient 详解
转发地址:http://blog.csdn.net/cowcga/article/details/6198382 关于TIdTCPClient的几种方法 收藏 其实Indy比较简单,但是可以提供的方法 ...
- (转)收集：Hibernate中常见问题 No row with the given identifier exists问题的原因及解决
Hibernate中No row with the given identifier exists问题的原因及解决 产生此问题的原因: 有两张表,table1和table2.产生此问题的原因就是tab ...
- 设置HTML表格细边框
简介:WEB前端|这是关于怎么设置HTML表格细边框的问题,把表格边框设置为细小的线条边框一般我们用表格的时候总会给它个border属性,比如:<tableborder="1" ...
- FusionCharts使用问题及解决方法(一)-FusionCharts常见问题大全
当你利用FusionCharts创建图表时报错,原因是多方面的.本文总结了一些常见问题及解决方法供大家参考,希望对大家有帮助. 如果你无法看到任何图表: 如果浏览器中的进度条一直加载,或者右键菜单显示 ...
- Android----paint触摸轨迹监听
paint触摸轨迹监听,主要是三种而已,ACTION_DOWN,ACTION_MOVE,ACTION_UP public boolean onTouchEvent(MotionEvent event) ...
- UIApearance
转载自:http://www.cocoachina.com/ios/20150723/12671.html 文章开头先援引一下Mattt Thompson大神在UIApearance里的一句话吧: 1 ...
- JAVA List<T> 如何初始化
通常用法:List<类型> list=new ArrayList<类型>();List是一个接口,不可实例化,通过实例化其实现类来使用List集合,他的最常用实现类ArrayL ...
- IE6 7 父级元素的overflow:hidden 是包不住子级的relative
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- FIFO 和 LRU 调度算法
在一个采用页式虚拟存储管理的系统中(字地址序列.页号.块号均从零开始编址),有一用户作业,它依次要访问的字地址序列是:15,128,300,388,246,402,223,142,360,267,若该 ...
- HDU 5171 GTY's birthday gift 矩阵快速幂
GTY's birthday gift Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Othe ...