原生CSS动画回调事件
来源:互联网 发布:在淘宝开店要交保证金吗 编辑:程序博客网 时间:2024/06/16 20:10
原文链接: Detecting CSS Animation Completion with JavaScript
原文日期: 2014年02月20日
翻译日期: 2014年02月21日
翻译人员: 铁锚
2014年对于我的web开发生涯来说有一个难以承认的事实,那就是传统的JavaScript 工具库几乎都快死了。许多年来我们一直依赖于工具类库进行开发,但现在 JavaScript 和 CSS 本身已经提供了绝大多数我们需要的特性. 如果我们静下心来研究这些原生的功能,那么就可以减少JavaScript工具库的使用。我经常听到一个坚持使用工具库的原因是CSS动画不提供回调。
JavaScript代码
涉及此段JavaScript的唯一原因是需要考虑浏览器的前缀。 transitionend事件和 animationend 事件是标准浏览器使用的,但基于webkit的浏览器仍然依赖于前缀,所以我们必须先确定事件的前缀,然后才能调用:
想象一下,不使用类库我们可以节省多少的代码量. 比如 duration, fill-mode, 以及 delay 我们都可以通过 CSS 进行设置,如此一来,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将变得更加的轻量化,感觉生活又美好了一些!
3 0
- 原生CSS动画回调事件
- 原生CSS动画回调事件
- 动画事件回调
- Css 动画的回调
- js原生动画效果
- C++原生事件
- 原生JavaScript事件详解
- 原生js--事件类型
- js原生事件封装
- JavaScript原生事件机制
- 原生js--事件类型
- 原生JavaScript事件详解
- JS自定义事件原生
- 原生JS事件详解
- javascript模拟原生事件
- 原生JavaScript事件详解
- 原生js onclick事件
- 原生HTML5自定义事件
- Unity 脚本编译的四个阶段
- init()和onEnter()方法的区别
- 英语学习——————20140221
- Python子进程 (subprocess包)
- Python正则表达式指南
- 原生CSS动画回调事件
- block的注意事项
- android中开启线程
- 苹果官方文档学习 ----arc 对象所有权
- ffmpeg avformat_open_input返回失败的解决办法
- 接口参数json转对象
- C++对象中的私有成员变量可以被访问
- fastjson的简单使用
- 避开Google Voice Search利用Google Speech API实现Android语音识别之Demo实现