WebkitAnimationEnd不触发。谁能看到为什么？ [英] WebkitAnimationEnd isn't firing. Can anyone see why?

问题描述

我最近开始讨论Javascript，并可以看到一些不错的应用程序的动画结束侦听器在我的工作。我有以下代码，没有我的动画结束的侦听器正在触发。任何人可以看到任何理由为什么两个听众都不工作？我在Chrome。

http： //jsfiddle.net/spacebeers/jkUyT/1/

感谢。

  #animationTest {
 width：150px; 
 text-align：center; 
 display：block; 
 padding：20px; 
 background：＃000; 
 color：#fff; 
 border-bottom：10px solid red; 
 cursor：pointer; 
 transition：border-bottom 0.5s linear; / * vendorless fallback * / 
 -o-transition：border-bottom 0.5s linear; / * opera * / 
 -ms-transition：border-bottom 0.5s linear; / * IE 10 * / 
 -moz-transition：border-bottom 0.5s linear; / * Firefox * / 
 -webkit-transition：border-bottom 0.5s linear; / * safari和chrome * / 
} 
 
 #animationTest：hover {
 border-bottom：10px solid blue; 
} 
 
< a id =animationTest>将鼠标悬停在我身上< / a> 
 
 $（'文件'）准备就绪（函数（）{
变种animationTest =的document.getElementById（'animationTest'）; 
 
 animationTest.addEventListener（' webkitAnimationEnd'，函数（事件）{
警报（说完动画（听众）！）; 
的console.log（说完动画（听众）！）; 
}，FALSE） ; 
 
 $（'＃animationTest'）绑定（webkitAnimationEnd功能（事件）{
警报（说完动画（绑定）！）; 
控制台。 log（Finished animation（bind）！）; 
}，false）; 
}）; 
  

解决方案

应该是 webkitTransitionEnd

的 http://jsfiddle.net/jkUyT/3/

I've recently started messing about with Javascript and can see some nice applications for the animation end listener in my job. I've got the following code and none of my listeners for the animation ending are firing. Can any one see any reason why either of the two listeners aren't working? I'm looking in Chrome.

http://jsfiddle.net/spacebeers/jkUyT/1/

Thanks.

#animationTest {
    width: 150px;
    text-align: center;
    display: block;
    padding: 20px;
    background: #000;
    color: #fff;
    border-bottom: 10px solid red;
    cursor: pointer;
            transition: border-bottom 0.5s linear; /* vendorless fallback */
         -o-transition: border-bottom 0.5s linear; /* opera */
        -ms-transition: border-bottom 0.5s linear; /* IE 10 */
       -moz-transition: border-bottom 0.5s linear; /* Firefox */
    -webkit-transition: border-bottom 0.5s linear; /*safari and chrome */
}

#animationTest:hover {
    border-bottom: 10px solid blue;
}

<a id="animationTest">Hover over me</a>

$('document').ready(function(){
    var animationTest = document.getElementById('animationTest');

    animationTest.addEventListener('webkitAnimationEnd', function(event){
            alert("Finished animation (listener)!");
            console.log("Finished animation (listener)!");
        }, false );

        $('#animationTest').bind("webkitAnimationEnd", function(event){
            alert("Finished animation (bind)!");
            console.log("Finished animation (bind)!");
        }, false );
});

​

解决方案

It should be webkitTransitionEnd

http://jsfiddle.net/jkUyT/3/

这篇关于WebkitAnimationEnd不触发。谁能看到为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！