addEventListener不会在javascript中触发

Question

我有一个按钮，它使矩形表面出现并在单击时重新出现。 一次单击按钮将显示“ home_card”，再次单击将使其消失。 出现的效果功能应该在移除表面时为动画设置问题。

HTML代码-脚本称为“ side_menu.js”，因为该动画是包含多个功能的较大脚本的一部分。 卡的显示和消失都链接到“提交”按钮。

CSS的第一部分是卡片的标记。以下三部分是卡片的输入动画。 这是应有的功能。 最后三部分用于卡的移除动画。 这也可以正常运行，因此这部分代码是正确的。

Javascript代码是我正在运行的脚本的一部分，该脚本负责创建和删除卡。 入口效应正在执行应做的事情，去除效应未在做。 该卡已创建并具有动画效果。 再次按下该按钮时，将调用卡片移除动画，但最后并未移除卡片“ home_card”。 “ onanimationend”事件不会触发，控制台中什么也没有。 清除线本身确实起作用，这确实是不触发的事件！

 var transition_counter; var home_card; function card_AppearsHome() { if (transition_counter == 1) { home_card.className = 'homecard_dissappear'; //When using the css transition use transitionend, and when using keyframes/animation, use animationend. home_card.addEventListener('onanimationend', function() { document.getElementById('white_background_top').removeChild(home_card); transition_counter = 0; //animationend event is not firing //it does not find the home_card, onclick is not working either console.log("check animationend"); }); transition_counter = 0; } else { home_card = document.createElement('div'); home_card.id = "home_card"; home_card.className = "homecard_appear" document.getElementById("white_background_top").appendChild(home_card); transition_counter = 1; } } 

 /* Markup for the card created dynamically */ #home_card { position: relative; width: 20vw; height: 20vh; left: 54vw; top: 25vh; background-color: #000; } /* card appearing effect */ .homecard_appear { animation-name: card_app_anim; animation-duration: 4s; } /* standard animation */ @keyframes card_app_anim { from { left: 54vw; } to { left: 94vw; } } /* Safari 4.0 - 8.0 animation */ @-webkit-keyframes card_app_anim { from { left: 54vw; } to { left: 94vw; } } /* card disappearing effect */ .homecard_dissappear { animation-name: card_dis_anim; animation-duration: 4s; } /* standard animation */ @keyframes card_dis_anim { from { left: 94vw; } to { left: 54vw; } } /* Safari 4.0 - 8.0 animation */ @-webkit-keyframes card_dis_anim { from { left: 94vw; } to { left: 54vw; } } 

 <div id="white_background_top"> <input type="submit" class="transition_submit" value="Transition" onclick="card_AppearsHome()"> </div> 

错误在代码中

home_card.addEventListener('onanimationend', function() {}

该事件侦听器不会触发，控制台中什么也不会触发。我认为它找不到home_card对象，因为其他事件侦听器也不会触发。 Onclick也不起作用。 我缺少了一些东西，但不知道是什么。 你能帮我吗？

Answer 1

确保您通过浏览器设置了正确的EventListener

// Chrome, Safari and Opera

element.addEventListener("webkitAnimationEnd", myEndFunction);

// Firefox
element.addEventListener("animationend", myEndFunction);