文档章节

CSS3动画和过渡事件的监控

 唐炒栗子
发布于 2014/12/12 12:38
字数 196
阅读 35
收藏 0

CSS3 包含主要动画效果通过两种方式实现:
    动画(animation
    过渡(transition)

想要做这两种动画效果的开始和结束处触发事件,完成相关功能,则需要用到相关的事件监控:

动画(animation

标准写法:animationstart ,animationi teration(迭代,动画重复的时候) ,animationend


Webkit写法:webkitAnimationStart,webkitAnimationIteration (迭代,动画重复的时候),webkitAnimationEnd
过渡(transition)
标准写法:transitionend
Webkit写法:webkitTransitionEnd



例子:

document.getElementById("contentWrap").addEventListener("webkitTransitionEnd", function(){
	alert(123);
}, false);



参考文章:
http://www.web-tinker.com/article/20338.html
https://developer.mozilla.org/zh-CN/docs/CSS/Tutorials/Using_CSS_transitions
http://www.cnblogs.com/duanhuajian/archive/2013/01/29/2881973.html

© 著作权归作者所有

粉丝 2
博文 10
码字总数 2677
作品 0
广州
项目经理
私信 提问
CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

如果下面有提及‘发稿时间’,或者‘截止时间’,是指‘2017-8-1’。因为这篇文章是一篇迁移文章,是我以前在其它社区发布的原创文章。 1.前言 在自己的专栏上写了十几篇文章了,都是与js有关...

守候i
2017/11/20
0
0
好程序员web前端系列之css3动画

好程序员web前端系列之动画,CSS3属性中有关于制作动画的三个属性: transform,transition,animation keyframes @keyframes mymove{ from{初始状态属性} to{结束状态属性} } 或 @keyframes m...

好程序员IT
05/08
13
0
Vue2.0 Transition常见用法全解惑

Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑。这里只涉及单元素/组件...

hieeyh
09/29
0
0
css3动画简介以及动画库animate.css的使用

在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工。美你妹啊,请叫我前端工程师好不好。呃。。好吧,攻城尸。。。呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能...

lovethe51cto
2016/01/12
0
0
CSS3 transition规范的实际使用经验

本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,我要谈的是技术背景,主要讨论在使用CSS过渡的过程中所未预料到的问题。 结构 (HTML),表现(CSS),以及行为(JavaScript...

罗马教堂的钟声
2015/11/25
27
0

没有更多内容

加载失败,请刷新页面

加载更多

总结:TCP/IP协议

一、介绍 TCP协议属于OSI七层模型中的传输层协议,提供处于网络连接中的两台计算机之间的数据 传输。   在传输层有两个性质不同的协议:TCP(Transmission Control Protocol,传输控制协议...

浮躁的码农
14分钟前
1
0
一言不合就删库跑路?万名贡献者和阿里巴巴开源的二三事

9 月 27 日云栖大会,阿里巴巴宣布贾扬清担任开源技术委员会负责人。 有人问:开源是为了什么? 从个人视角看,可以证明自己的专业能力,获得行业认可; 从企业视角看,可以建立技术影响力,...

大涛学弟
25分钟前
2
0
JAVA编程注意事项(性能篇)

1. 尽量在合适的场合使用单例 使用单例可以缩短加载的时间,提高加载的效率,单例主要适用于以下三个方面: 第一,控制资源的使用,通过线程同步来控制资源的并发访问; 第二,控制实例的产生...

你好夜故事
26分钟前
2
0
List 前端 AngularJS JS 对IP排序

数据格式 $scope.dataList=[ {"ip":"192.168.10.10", "port":"8080",...}, { "ip":"192.168.10.12", "port":"8080",... } ,.....] 调用 $scope.ipSortForward($scope.dataList,"ip") 核心代码......

最菜最菜之小菜鸟
27分钟前
2
0
浅析Cassandra LeveledCompactionStrategy

前言 Cassandra是基于LSM架构的分布式数据库。LSM中有一个很重要的过程,就是压缩(Compaction)。默认的压缩策略是SizeTieredCompactionStrategy,今天主要说一下另一种压缩策略LeveledComp...

阿里云官方博客
31分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部