动画在Javascript中删除的HTML5元素

我有一个按钮，使一个矩形表面出现，并重新出现在点击。点击按钮一次，显示“主页卡”，再次点击则消失。出现的效果应该在它的功能，我有一个动画的表面时，它被删除的问题

我试图在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;}
}

这应该可以做到（用它替换提问的代码部分）：

if（转换计数器==1）{
const home_card=document.querySelector（“#homeCard”）；
主卡。addEventListener（'onanimationend'，函数（）{
主卡。移除（）；
转换计数器=0；
});
home_card.classList.add（'homecard_dissequent'）；
}

它为

onanimationend

（删除元素并重置

transition\u计数器

）添加一个事件侦听器，并添加

homecard\u dissequent

类（启动转换）。当转换结束时，事件激发，函数运行

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

---

最初，我的示例错误地使用了

ontransitionend

（问题中建议），并围绕提供添加事件侦听器的语法展开，因为这似乎是OP的主要问题

---

然而，正如folo和Hitesh Lala在评论中指出的那样，上述动画不会触发

ontransitionend

，因为它不包含任何

转换。因此，要绑定到的适当事件是
onanimationend
我认为您需要监听
onanimationend
事件。它应该是
onanimationend
，而不是
onanimationend
，就像上面原始帖子中提到的Hitesh一样。您可能还希望多填充事件，例如：@folo，您是对的。因为OP没有费心创建一个，所以我没有测试它。我试图坚持以下经验法则：不要在回答问题上比OP在研究问题上投入更多的精力。这听起来很明智；）谢谢你的回答。。我尝试了上面的代码，但仍然不起作用。你确实把我指向了AnimationEnd，谢谢你！对不起，没有一个最小的可复制的示例，昨晚已经很晚了。。我已经添加了我的进度另一个答案：-）谢谢大家的回复！显然，我需要将我的迭代转移到另一个问题，StackOverflow的代码也是如此。是的，你现在可以在电视上找到了