javascript - 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);