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 Operaelement.addEventListener("webkitAnimationEnd", myEndFunction);// Firefoxelement.addEventListener("animationend", myEndFunction);