Question

嘿伙计们，我试图让我的updatable = false在我的自定义动画中解雇，但不知何故发生了什么，我在MDN上关注这些例子，但仍然没有太大的成功，我基本上有以下代码。

HTML code：

webkitAnimationEnd msAnimationEnd animationend

JS代码：

<div id="tst">

</div>

CSS代码：

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

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

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

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

可以找到小提琴here。

Answer 1

addEventListener来电是错误的，addEventListener的第一个参数是：

Quoted from the specs

类型类型 DOMString


用户正在注册的事件类型

你不能在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 );}

webkitAnimationEnd msAnimationEnd animationend not working

1 个答案: