zoukankan      html  css  js  c++  java
  • 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()吧!

  • 相关阅读:
    jQuery 如何存储,获取和删除 Cookies
    mysql调用存储过程出现Illegal mix of collations错误
    vim IDE
    android 播放Raw文件夹下的音乐文件
    7种形式的Android Dialog使用举例
    Chronometer 计时器使用
    获取屏幕,适应屏幕
    android 碎片
    安卓开发者必备的42个链接
    自定义TabActivity,TabActivity的美化
  • 原文地址:https://www.cnblogs.com/zcynine/p/5580984.html
Copyright © 2011-2022 走看看