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

Answer 1

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

// Chrome, Safari and Opera

element.addEventListener("webkitAnimationEnd", myEndFunction);

// Firefox

element.addEventListener("animationend", myEndFunction);