transitionend基本用法指定需要过渡的CSS属性。并不是所有属性都能过渡的，只有能数字量化的CSS属性才能过渡

##transitionend事件是什么

概念：

transitionend事件在CSS transition完成的时候触发。如果transition在完成前被删除（例如remove掉transition属性），则不会触发。如在transition完成前设置 display: none，或CSS未作改变，事件同样不会被触发.

基本栗子


/*

* 在指定的元素上监听transitionend事件, 例如#demo

* 然后指定一个函数, 例如 showMessage()

*/

function showMessage() {

console.log('Transition 已完成');

}

var element = document.getElementById("demo");

element.addEventListener("transitionend", showMessage, false);//true捕获执行，false冒泡执行

demo演示

演示链接

transitions ：

transition-property

指定需要过渡的CSS属性。并不是所有属性都能过渡的，只有能数字量化的CSS属性才能过渡

数字量化的CSS属性：width，height，top，right，bottom，left，zoom，opacity，line-height，background-position，word-spacing，font-weight，vertical-align，outline-outset，z-index

all，表示所有属性都将获得过渡效果。

transition-duration

过渡需要的时间，单位可指定s秒，也可指定ms毫秒。默认值是0，表示立刻变化。如果设置了多个过渡属性，但每个属性的过渡时间都一样，你没必要为transition-duration设多个值，只有设一个即可，该值会应用到所有过渡属性上

transition-delay

延迟开始过渡的时间，默认值是0，表示不延迟，立即开始过渡动作。单位是s秒或ms毫秒。w3cschool上没说的是，该属性还能设负时间，意思是让过渡动作从该时间点开始启动，之前的过渡动作不显示。

transition-timing-function

过渡函数，有linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps其实它们都是贝赛尔曲线。

linear是匀速过渡，ease是先快再慢的节奏，ease-in是加速冲刺的节奏，ease-out是减速到停止的节奏，ease-in-out是先加速后减速的节奏。

##transitionend的应用

浏览器兼容

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。，Opera 7.0 及 Opera 更早版本也不支持。但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件句柄 .

栗子

/* 不同浏览器兼容 */

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];
        }
    }
}

##为什么使用transitionend

优势：

使用JS控制CSS或动画，通常会使用setTimeout方法，有两点不便：

①需要在两个地方规定动画时间，CSS和JS。 ②并不十分准确，回调可能会滞后。CSS和JS以同样的速度执行，这只是理想的状态。

劣势：

①如果操作多属性CSS，假设padding，transitionend会在padding-top，padding-right，padding-bottom，padding-left过渡结束时均触发transitionend事件，transitionend事件将执行 4 次！ ②如果子元素也有transition的话，transitionend事件会冒泡。需要阻止冒泡。 ③如果是重复的执行transition，需要解绑


//关于重复调用transition

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);

};

**注意1：**上述第一条‘多属性’与‘重复的执行‘transition属性不同，“多属性”指一条属性附带多个属性，如border、margin、padding等，‘重复的执行’指transition属性有多条属性需要过度，如操作一个div同一时间过度‘color、width、height、background’时。 注意2 :hover将触发两次transition,也将触发两次transitionend.

##关于animationend

animationstart 事件在CSS动画开始播放时触发
animationend事件在CSS动画播放完成时触发

animationend只会在动画完成后执行一次;

animationiteration 事件在 CSS 动画重新播放时触发