javascript - 动画 HTML5 元素在 Javascript 中被删除

Question

我有一个按钮，它使矩形表面出现并在单击时重新出现。单击该按钮一次使“home_card”出现，再次单击它使其消失。出现的效果应该起作用，当它被移除时我有一个动画表面的问题。

我正在尝试在 home_card 元素上使用事件监听器，然后只删除“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;}
}

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，因为它不包含任何转换。因此，要绑定(bind)的正确事件是 onanimationend。