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，因为它不包含任何transition。因此，绑定到的适当事件是onanimationend。

在JavaScript中删除的HTML5动画元素

1 个答案: