transitionend animationend 事件兼容问题

 平时在做动画的时候，如果涉及交互比较多一些的时候。比如像拆礼盒，摇筛子等基于微信的小游戏，transitionend和animationend这个两个事件都会用到，之前做微信的小游戏过程中，把两个事件在pc端和移动端的常用的浏览器给测试了一下并做了整理，虽然浏览器的支持结果大同小异，但是还是有一些细微的差别的，其中微信和qq浏览器（其实是同一个）对于两个事件都需要加前缀！

一、transitionend事件

       1.浏览器支持情况

      注：transitionend的事件只有三种形式，之所以不检测MozTransitionEnd，msTransitionEnd 这两个的事件，因为火狐和IE都已经支持了transitionend，相反的对于加前缀反而不执行事件，oTransitionEnd  代表的是欧朋浏览器，transitionend 一定要小写 否则浏览器不识别，webkitTransitionEnd中T和E是一定要大写的，w大小写是无所谓的！

       2.transitionend有过渡效果的css属性

      为什么要知道有过渡css属性的呢？首先是，实例运用中，经常会发现，一个元素起始时的display:none,想通过transition来实现动画过渡效果，结果发现不行，因为display没有过渡效果！ 其次，有过渡的css属性决定了transtionend的执行次数(下面会说)，在transitionDuration的时间不为0的时候，有过渡效果的css属性，也就transition-property支持的css的属性有:

      3.transitionend事件的多次执行

     transitionend事件执行了几次是取决于transition-property的设置，假设我们设置transitionProperty="width,height,background-color,transform"，那么这个时候你应该猜测得到transitionend执行了4次（如果某个属性没有改变值，那么是不会触发transitionend的事件）,尝试运行下面的代码就知道：

运行

      结果很明显：transitionend触发了四次，因为width,height,background-color,transform四个属性都被改变了！而在实际的运用中，我们往往只需要所有的动画结束后执行一次transitionend的事件来达做我们想要做的事情，这个时候就需要我们做一些处理，让transitionend事件在多个css属性改变的情况下执行一次，现在定义一个函数handleTransitionEndEvent来处理多次触发的问题：

var handleTransitionEndEvent= function (elem,fn,duration){
    var called= false ;
    //在每次transitionEnd的事件后执行该函数
    var callback = function (){
            if (!called){
                fn();
                called= true ;
            }
    };
    elem.addEventListener(transitionEnd, function (){
        callback();
        //通过setTimeout来补救windowphone中不触发事件的问题
        setTimeout(callback,duration);
    }, false );
};

      通过这个函数函数，就可以解决了transitioned事件多次执行的问题，达到我们想要的目的，这时候把这段函数加到上面的代码中（为了配合本示例，将called的变量放到函数外面），运行下面的代码：

运行

      结果每次效果过渡完后，只执行了一次transtionend的事件！关于transitonend的jquery的处理方式，可以参考Bootstrap中的transition.js的处理方式。

二、animationend事件

      1.animationend浏览器支持情况:

      animationend的事件只有两种形式：animationend和WebkitAnimationEnd(注意事件名称的大小写)

      2.animationend事件执行次数:

      不同于transitionend事件,animationend只会在动画完成后执行一次：

运行

理解transtionend和animationend两个事件，主要是在浏览器的前缀上面，搞清楚了这东西，做起来就比较得心应手了！

转自：http://wnworld.com/archives/191.html