javascript - webkitAnimationEnd msAnimationEnd animationend 不工作

Question

嘿伙计们，我正在尝试让我的 webkitAnimationEnd msAnimationEnd animationend 在我的自定义动画中触发，但不知何故没有发生任何事情，我正在按照 MDN 上的示例进行操作，但仍然没有太大的成功，我基本上有以下代码。

HTML 代码:

<div id="tst">

</div>

JS代码:

function showMessage() {
                alert('Transition has finished');
            }

            var element = document.getElementById("tst");
            element.addEventListener("webkitAnimationEnd msAnimationEnd animationend", showMessage, false);

CSS 代码:

#tst {
                height: 200px;
                width: 200px;
                background: red;
                position: relative;
                -webkit-animation-name: anim;
                -o-animation-name: anim;
                animation-name: anim;
                -webkit-animation-duration: 6s;
                -o-animation-duration: 6s;
                animation-duration: 6s;
            }

            @keyframes anim {
                0% {
                    left: 50%
                }
                100% {
                    left: 0;
                }
            }

自定义动画完成后，事件不会触发。为什么 ？？

我正在关注 MDN doc's在这里并在 Mozilla Firefox 中运行我的测试。

可以找到Fiddle here .

Answer 1

你的addEventListener调用是错误的，addEventListener的第一个参数是:

Quoted from the specs

• type of type DOMString

The event type for which the user is registering

你不能在 vanilla Javascript 中指定 3 种类型的事件，它不是 CSS 选择器(也不是 jQuery 选择器)，你需要分别指定它们:

function showMessage() {
    alert('Transition has finished');
}

var element = document.getElementById("tst");
element.addEventListener("webkitAnimationEnd", showMessage, false);
element.addEventListener("oAnimationEnd"     , showMessage, false);
element.addEventListener("msAnimationEnd"    , showMessage, false);
element.addEventListener("animationend"      , showMessage, false);

Running demo

编辑:

Jquery .on 事件不会做任何魔法，你怎么能从 source 读取，这只是一个递归调用:

 for ( type in types ) {this.on( type, selector, data, types[ type ], one );}