webkitAnimationEnd事件与webkitTransitionEnd事件

写一个焦点图demo，css3动画完成以后要把它隐藏掉，这里会用到css3的事件，以前没有接触过，结果查了一下发现这是一片新天地啊，而且里面还有好多坑，比如重复动画多次触发什么的。anyway，我还是先抓住有用的吧！任何能为我所用的都是有用的，任何不能为我所用的都是没用的，任何我能学会掌握的都是有用的，我学不会的，再屌也没用！

 

//捕捉webkitAnimationEnd事件
element.addEventListener('webkitAnimationEnd', end, false);

//捕捉webkitTransitionEnd事件
element.addEventListener('webkitTransitionEnd', end, false); 

function end(){
    //code
}

没什么难以理解的，看代码就能明白。

 

但是这里有个参数有小坑，下面是我自己写的end方法

function transitionEnd(e){
    if(e.propertyName=="-webkit-transform"){
        this.parentNode.style.visibility="hidden";
    }
}

就是那个event参数，我怎么都进不到那个if分支里，究其原因，我把e打印出来看一下，并没有"-webkit-transform"这样一个propertyName，只有一个叫"transform"的，所以我就改成了下面这样。

function transitionEnd(e){
    if(e.propertyName=="-webkit-transform" || e.propertyName=="transform"){
        this.parentNode.style.visibility="hidden";
    }
}

反正坑挺多的，随时console.log()吧！

 

转载于:https://www.cnblogs.com/zcynine/p/5580984.html