正在加载
请稍等

菜单

红楼飞雪 梦

15526773247

文章

Home web前端开发 原生CSS动画回调事件
Home web前端开发 原生CSS动画回调事件

原生CSS动画回调事件

web前端开发 by

2014年对于我的web开发生涯来说有一个难以承认的事实,那就是传统的JavaScript 工具库几乎都快死了。许多年来我们一直依赖于工具类库进行开发,但现在 JavaScript 和 CSS 本身已经提供了绝大多数我们需要的特性. 如果我们静下心来研究这些原生的功能,那么就可以减少JavaScript工具库的使用。我经常听到一个坚持使用工具库的原因是CSS动画不提供回调。

Wrong.  False.  Incorrect.  ¿Que? JavaScript确实提供了在 JS 动画和过渡完成后触发回调的功能。

查看示例请点击这里!
JavaScript代码
涉及此段JavaScript的唯一原因是需要考虑浏览器的前缀。 transitionend 事件和  animationend 事件是标准浏览器使用的,但基于webkit的浏览器仍然依赖于前缀,所以我们必须先确定事件的前缀,然后才能调用:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片

  1. /* From Modernizr */
  2. function whichTransitionEvent(){
  3.     var t;
  4.     var el = document.createElement(‘fakeelement’);
  5.     var transitions = {
  6.       ‘transition’:‘transitionend’,
  7.       ‘OTransition’:‘oTransitionEnd’,
  8.       ‘MozTransition’:‘transitionend’,
  9.       ‘WebkitTransition’:‘webkitTransitionEnd’,
  10.       ‘MsTransition’:‘msTransitionEnd’
  11.     }
  12.     for(t in transitions){
  13.         if( el.style[t] !== undefined ){
  14.             return transitions[t];
  15.         }
  16.     }
  17. }
  18. /* 监听 transition! */
  19. var transitionEvent = whichTransitionEvent();
  20. transitionEvent && e.addEventListener(transitionEvent, function() {
  21.     console.log(‘Transition 完成!  原生JavaScript回调执行!’);
  22. });
  23. /*
  24.     在 “whichTransitionEvent” 中,可以将 “transition”文本替换为  “animation”,则处理的就是动画,此处代码省略…)
  25. */

在动画/过渡效果完成后,将会触发回调函数. 因为不需要那些很重量级的类库支持就能实现,在很多时候应该是很有用的。
想象一下,不使用类库我们可以节省多少的代码量. 比如 duration, fill-mode, 以及 delay 我们都可以通过 CSS 进行设置,如此一来,JavaScript将变得更加的轻量化,感觉生活又美好了一些!

 

11 2015-04

 

我要 分享

 

 

本文 作者

 

相关 文章