用Javascript实现HTML5元素被移除时的动画效果

Question

我有一个按钮，点击后可以让一个矩形表面出现和消失。第一次点击按钮会使“home_card”出现，再次点击则会使其消失。出现效果按预期工作，但移除表面时动画存在问题。

我正在尝试在home_card元素上使用eventlistener，并且只有在“transitionend”事件发生时才删除该元素。这是我认为应该的做法，但我仍然做错了什么。有人能发现错误吗？

我的javascript文件如下：

function card_AppearsHome() {


if (transition_counter == 1){

    HOW CAN I INSERT A "DISAPPEARING TRANSITION" before removing the element? I know you can use an eventlistener for the "ontransitionend" event, but not how you can do it.. 

    document.getElementById("white_background_top").removeChild(home_card);
    transition_counter = 0;
}

else {

    //card/ div is created and appears, need to select a tranform: transition method 
    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;
}
}

这是带有首次出现效果的CSS代码...

/* card appearing effect */
.homecard_appear{
animation-name: card_app_anim;
animation-duration: 4s;
}

/* standard transition */
@keyframes card_app_anim {
from {left: 54vw;}
to {left: 94vw;}
}

/* Safari 4.0 - 8.0 transition */
@-webkit-keyframes card_app_anim {
from {left: 54vw;}
to {left: 94vw;}
}

这是CSS中实现消失效果的代码，我无法理解如何在Javascript文件中正确地实现它。

/* card disappearing effect */
.homecard_dissappear{
animation-name: card_dis_anim;
animation-duration: 4s;
}

/* standard transition */
@keyframes card_dis_anim {
from {left: 94vw;}
to {left: 54vw;}
}

/* Safari 4.0 - 8.0 transition */
@-webkit-keyframes card_dis_anim {
from {left: 94vw;}
to {left: 54vw;}
}

- Niels Vanwingh

---

我认为你需要监听 onanimationend 事件。 - Hitesh Lala

Answer 1

这应该就可以了（用它替换你提问的代码部分）：
最初的回答：

if (transition_counter === 1) {
  const home_card = document.querySelector('#homeCard');
  home_card.addEventListener('onanimationend', function() {
    home_card.remove();
    transition_counter = 0;
  });
  home_card.classList.add('homecard_dissappear');
}

它为onanimationend添加了一个事件侦听器（用于删除元素并重置transition_counter），并添加了homecard_dissappear类（启动转换）。当过渡结束时，事件触发，函数运行。

如果您在实施中遇到任何问题，请考虑使用最小可重现示例更新问题，我将更新我的答案。

---

最初我的示例错误地使用了ontransitionend（建议在问题中提出），并围绕提供添加事件侦听器的语法展开，因为这似乎是OP的主要问题。

但是，正如folo和Hitesh Lala在评论中指出的那样，上述动画不会触发ontransitionend，因为它不包含任何transition。因此，绑定的正确事件是onanimationend。

- tao

---

应该使用onanimationend而不是ontransitionend，就像Hitesh在上面的原始帖子中提到的那样。您可能还需要填充事件，例如：https://gist.github.com/webcyou/a1093f2f1b4533cf3f7a - folo

@folo，你说得对。由于OP没有创建一个[mcve]，我没有测试它。我尽量遵循以下经验法则：不要在回答中投入比OP研究问题更多的精力。 - tao

听起来很明智 ;) - folo

谢谢你的回答。我尝试了上面的代码，但仍然不起作用。你指出了onanimationend，谢谢！很抱歉我没有提供一个最小可重现的示例，昨晚太晚了。我已经在另一个答案中添加了我的进展 :-) - Niels Vanwingh

感谢大家的回复！显然我需要将我的迭代移动到另一个问题，这也是StackOverflow的代码。所以我这样做了，现在你可以在https://stackoverflow.com/questions/56518327/addeventlistener-does-not-fire-in-javascript找到它。 - Niels Vanwingh

问题出在浏览器类型上...// Chrome、Safari 和 Opera 使用element.addEventListener("webkitAnimationEnd", myEndFunction);// Firefox 使用element.addEventListener("animationend", myEndFunction); - Niels Vanwingh