推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
magensky

webKitTransitionEnd 监听不到

  •  
  •   magensky · Sep 25, 2016 · 4863 views
    This topic created in 3541 days ago, the information mentioned may be changed or developed.
    <div class="main">
    <div class="pan" id="pan2"><img /></div>
    </div>



    ////////////

    $('.main .pan').css(
    {
    '-webkit-transition':'3s',
    'transition':'3s',
    '-webkit-transform':'rotate('+ targetDeg +'deg)',
    'transform':'rotate('+ targetDeg +'deg)'
    }

    );
    $('.main .pan').get(0).addEventListener('webKitTransitionEnd',function () {
    alert(2);
    })


    webKitTransitionEnd 监听不到,无法触发 alert(2);,有人知道原因吗
    7 replies    2016-09-26 10:17:00 +08:00
    Biwood
        1
    Biwood  
       Sep 25, 2016
    请务必先执行绑定事件的代码,在执行事件触发的代码,谢谢
    YuJianrong
        2
    YuJianrong  
       Sep 25, 2016
    更重要的不是先写对事件名吗?

    顺便我的建议是最好不要依赖 transitionEnd 这个函数。多年以前的 ios safari 有 bug 有些时候不会触发,很久没看不知道现在如何,大多数情况还不如直接用 setTImeout 。
    exodia
        3
    exodia  
       Sep 25, 2016
    webKitTransitionEnd => transitionend 或 webkitTransitionEnd
    cyio
        4
    cyio  
       Sep 25, 2016
    关注,试了下不行,感觉确实有坑

    不必纠正书写了,真心助人者应该自己试试再回答
    Anshi
        5
    Anshi  
       Sep 26, 2016
    webkitTransitonEnd mozTransitonEnd MSTransitonEnd otransitionend transitionend

    你感受一下。。。 safari 10.0 和 chrome53 表示最后一个生效
    hronro
        6
    hronro  
       Sep 26, 2016 via Android
    addEventListener 的第三个参数你没写
    morethansean
        7
    morethansean  
       Sep 26, 2016
    因为你用的浏览器已经没有 webkitTransitionEnd 的支持了,请用标准的 transitionend. 当然为了兼容你可以两个都注册上。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2878 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 03:46 · PVG 11:46 · LAX 20:46 · JFK 23:46
    ♥ Do have faith in what you're doing.