html隐藏右侧移出动画,在JavaScript中删除的HTML5动画元素

我有一个按钮,它使矩形表面出现并在单击时重新出现.一次单击按钮将显示“ home_card”,再次单击将使其消失.出现的效果功能应该在移除表面时为动画设置问题.

我试图在home_card元素上使用事件监听器,然后仅在“ transitionend”上删除该元素.这是我应该阅读的方式,但是我仍然做错了什么.谁能发现错误？

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;}

}