webkitAnimationEnd msAnimationEnd animationend not working [英] webkitAnimationEnd msAnimationEnd animationend not working

问题描述

嘿伙计们我试图让我的 webkitAnimationEnd msAnimationEnd animationend 在我的自定义动画中触发，但不知何故发生了什么，我正在关注MDN的例子，但仍然没有很成功，我基本上有以下代码。

hey guys i am trying to get my webkitAnimationEnd msAnimationEnd animationend to fire in my custom animation but somehow nothing is happening , i am following the examples at MDN , but still without much success , i basically have the following code .

HTML code：

HTML code :

<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;
                }
            }

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

on completion of the custom animation the event is not firing. Why ??

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

I am following the MDN doc's here and running my tests in Mozilla Firefox.

可以找到小提琴这里。

推荐答案

您的 addEventListener 调用错误， addEventListener 的第一个参数是：

Your addEventListener call is wrong, the first parameter of addEventListener is:

< a href =http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-addEventListener =nofollow>引自规范

• 类型 类型 DOMString

• type of type DOMString

用户注册的事件类型

你不能在vanilla Javascript中指定3种类型的事件，它不是CSS选择器（也不是jQuer） y selector：你需要单独指定它们：

You cannot specify 3 types of event in vanilla Javascript, it is not a CSS selector (nor a jQuery selector), you need to specify them separately:

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);

运行演示

编辑：

Jquery。在事件上没有什么魔法，你如何阅读来源，它只是一个递归调用：

Jquery .on event doesn't do nothing of magic, how can you read from source, it's just a recursive call:

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

这篇关于webkitAnimationEnd msAnimationEnd animationend not working的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！