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. ARMs3c2440开发板挂接NFS服务

    1.修改IP地址,使虚拟机,电脑PC机.开发板位于同一个网段,开发板网线与电脑网络接口连接,如PC:ip 192.168.0.112 255.255.255.0 虚拟机 192.168.0.8 255 ...

  2. DWR Annotations

    DWR   Annotations DWR 标注是用来代替 dwr.xml 或者与其一同工作的. 1.初始配置 <servlet> <description>DWR contr ...

  3. 认识ExtJS(04)--常见Web框架的ExtJS改造

    常见Web框架的ExtJS改造 怎样开始改造工作? 改造主要集中在对表现层的修改,底层的数据库访问不需要进行任何的变动.也就是说主要集中早这2个方面:一方面是表现部分即是JSP页面:另一方面是客户端与 ...

  4. c#动态生成word，在本地可以执行，但发布到iis上出错解决方案

    报错点: Microsoft.Office.Interop.Word.DocumentClass.SaveAs 解决方案: 1.在"开始"->"运行"中输 ...

  5. bzoj1061 志愿者招募

    bzoj1061 志愿者招募 Description 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难 题:为即将启动的奥运新项目招募一批短期志愿者.经 ...

  6. JAVA调用c/c++代码

    JNI是Java Native Interface的缩写,中文为JAVA本地调用.使用JNI可以很方便的用我们的Java程序调用C/C++程序.很多时候,某些功能用Java无法实现,比如说涉及到底层驱 ...

  7. CodeForces 617A Elephant

    C语言语法入门题 #include<cstdio> #include<cstring> #include<vector> #include<cmath> ...

  8. 一、什么是hadoop？

    一.什么是hadoop 1. 背景 Hadoop为分布式文件系统和计算的基础框架系统,其中包含hadoop程序,hdfs系统等.   2. 名词解释 1.Hadoop, Apache开源的分布式框架. ...

  9. Linux cronolog

    1. 关于本文    本文将以cronolog 1.6.2.apache 2.2.6为例,以CentOS 5为平台,讲述cronolog的安装和设置. 2. 关于cronolog     cronol ...

  10. libusb开发者指南（转）

    源:libusb开发者指南 译者: gashero 作者: Johannes Erdfelt 日期: 2010-04-17 地址: http://libusb.sourceforge.net/doc/ ...