原生CSS动画回调事件
原文链接: Detecting CSS Animation Completion with JavaScript
原文日期: 2014年02月20日
翻译日期: 2014年02月21日
翻译人员: 铁锚
2014年对于我的web开发生涯来说有一个难以承认的事实,那就是传统的JavaScript 工具库几乎都快死了。许多年来我们一直依赖于工具类库进行开发,但现在 JavaScript 和 CSS 本身已经提供了绝大多数我们需要的特性. 如果我们静下心来研究这些原生的功能,那么就可以减少JavaScript工具库的使用。我经常听到一个坚持使用工具库的原因是CSS动画不提供回调。
Wrong. False. Incorrect. ¿Que? JavaScript确实提供了在 JS 动画和过渡完成后触发回调的功能。
JavaScript代码
涉及此段JavaScript的唯一原因是需要考虑浏览器的前缀。 transitionend
事件和 animationend 事件是标准浏览器使用的,但基于webkit的浏览器仍然依赖于前缀,所以我们必须先确定事件的前缀,然后才能调用:
/* From Modernizr */ function whichTransitionEvent(){ var t; var el = document.createElement('fakeelement'); var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd', 'MsTransition':'msTransitionEnd' } for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } } } /* 监听 transition! */ var transitionEvent = whichTransitionEvent(); transitionEvent && e.addEventListener(transitionEvent, function() { console.log('Transition 完成! 原生JavaScript回调执行!'); }); /* 在 "whichTransitionEvent" 中,可以将 "transition"文本替换为 "animation",则处理的就是动画,此处代码省略...) */
在动画/过渡效果完成后,将会触发回调函数. 因为不需要那些很重量级的类库支持就能实现,在很多时候应该是很有用的。
想象一下,不使用类库我们可以节省多少的代码量. 比如 duration, fill-mode, 以及 delay 我们都可以通过 CSS 进行设置,如此一来,JavaScript将变得更加的轻量化,感觉生活又美好了一些!
原生CSS动画回调事件的更多相关文章
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- Css 动画的回调
在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器
一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...
- Web高性能动画及渲染原理(1)CSS动画和JS动画
目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- 关于CSS动画几点要注意的地方
关于CSS动画几点要注意的地方 js操作transition无效果 先看这个demo以及stackoverflow的问题 http://jsfiddle.net/ThinkingStiff/QNnnQ ...
随机推荐
- Dynamics CRM 本地插件注册器连CRMAn unsecured or incorrectly secured fault was received from the other party
今天遇到个问题,在本地打开插件注册器连接到远程CRM服务器时报如下问题 但我在CRM服务器上连接注册器是可以打开的,所以不存在账号权限这类的问题了(当然我用的是超管的账号也不可能存在),最后查询得知是 ...
- android Spinner控件详解
Spinner提供了从一个数据集合中快速选择一项值的办法.默认情况下Spinner显示的是当前选择的值,点击Spinner会弹出一个包含所有可选值的dropdown菜单,从该菜单中可以为Spinner ...
- Swift类型推测在可选调用中的小提示
我们知道Swift中协议里也有对应于Objc中的可选方法或计算属性,当然协议必须以@objc伪指令修饰否则不可以哦. 如下示例: @objc protocol Transaction{ fun com ...
- Python 表示无穷大的数
我之前只知道设置初始值0.今天偶然在Python算法书上看到这个片段,从100个随机数里面找2个最靠近的自然数(不相等): from random import randrange seq = [ra ...
- [ExtJS5学习笔记]第二十八节 sencha ext js 5.1.0发布版本正式发布 extjs doc下载地址
本文地址:http://blog.csdn.net/sushengmiyan/article/details/41911539 本文作者:sushengmiyan ------------------ ...
- Solr 5.5.0 + tomcat 7.0.69 + zookeeper-3.4.6 Cloud部署
Solr介绍:Solr是一个独立的企业级搜索应用服务器,Solr基于Lucene的全文搜索服务器,同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了 ...
- Swift延迟加载的一种用途
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 有以下一种情况: 我们试图用Cocoa的语音合成类NSSpee ...
- 随机采样和随机模拟:吉布斯采样Gibbs Sampling
http://blog.csdn.net/pipisorry/article/details/51373090 吉布斯采样算法详解 为什么要用吉布斯采样 通俗解释一下什么是sampling. samp ...
- Android Paint类介绍以及浮雕和阴影效果的设置
Paint类介绍 Paint即画笔,在绘制文本和图形用它来设置图形颜色, 样式等绘制信息. 1.图形绘制 setARGB(int a,int r,int g,int b); 设置绘制的颜色,a代表透明 ...
- Android Device Administration 设备管理器——实现一键锁屏
Android Device Administration 设备管理器--实现一键锁屏 最近研究了一下安全这一块的内容,当然,我是比较水的,所以也拿不出什么好知识点,但是有一些冷门的东西我还是可以聊聊 ...