addEventListener 不会在 javascript 中触发

我有一个按钮,它使矩形表面出现并在单击时重新出现。单击该按钮一次使“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;

  }

}


蝴蝶不菲
浏览 252回答 1
1回答

潇潇雨雨

确保您通过浏览器设置了正确的 EventListener// Chrome, Safari and Operaelement.addEventListener("webkitAnimationEnd", myEndFunction);// Firefoxelement.addEventListener("animationend", myEndFunction);
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript