webkitAnimationEnd msAnimationEnd animationend not working

本文介绍了webkitAnimationEnd msAnimationEnd animationend not working的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 嘿伙计们我试图让我的 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: 引自规范 类型 类型 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！