WebkitAnimationEnd 没有触发。谁能明白为什么？答案

【问题标题】：WebkitAnimationEnd isn't firing. Can anyone see why?WebkitAnimationEnd 没有触发。谁能明白为什么？
【发布时间】：2012-07-24 16:14:48
【问题描述】：

我最近开始使用 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 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 );
});

【问题讨论】：

标签： javascript css listener dom-events

【解决方案1】：

应该是webkitTransitionEnd

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

【讨论】：

是的，您将 CSS 过渡误认为是动画。它们是两个不同的东西。
是的，这里是新手错误。现在来看看 CSS 动画。它们听起来很有趣。