運行動畫后如何刪除該元素？

Question

刪除代碼工作正常，但是我想在完成“ delorean”的css動畫后刪除元素，然后每次單擊按鈕時都需要重新啟動動畫，如何使用“刪除”代碼來實現這個？ 謝謝。

function touchDelorean(event) {
    event.preventDefault();
    if (showDelorean == true) {
        delorean();
    }
}

function delorean() {
    var image = document.createElement("img");
    image.id = "delorean";
    image.src = "Images/delorean/" + where + ".png";
    document.getElementById("deloreanContainer").appendChild(image);

//  delelement("deloreanContainer");
}

function delelement(elem) {
    var element = document.getElementById(elem);
    while (element.firstChild) { element.removeChild(element.firstChild); }
}

CSS

#delorean {
position: absolute;
top: 0%;
left: 0%;
width: 29%;
height: 9.8%;
opacity: 1.0;
-webkit-animation: delorean_anim 10s linear;
-webkit-animation-direction: normal, horizontal ;
-webkit-animation-timing-function: cubic-bezier(1, 0, 1, 0);
}

@-webkit-keyframes delorean_anim {
0% { -webkit-transform: translate(-24vw, 0vw) scale(0.6, 0.6) rotate(0deg) }
20% { -webkit-transform: translate(137vw, 36vw) scale(3.5, 3.5) rotate(0deg) }
100% { -webkit-transform: translate(137vw, 36vw) scale(3.5, 3.5) rotate(0deg)}
}

Answer 1

在運行動畫的元素上，假設它是image ，則可以添加一個事件偵聽器。

// Chrome, Safari and Opera
image.addEventListener('webkitAnimationEnd', function() {
  image.remove()
});

// Standard syntax
image.addEventListener('animationend', function() {
  image.remove()
});

如果您要處理的是CSS過渡而不是CSS動畫，那么您正在尋找transitionend 。 但是，有時這些事件可能不可靠，因此，如果您知道動畫的長度，最好使用上面建議的setTimeout 。

在react.js中，臭名昭著的CSSTransitionGroup組件由於過渡事件未按預期觸發而出現了許多問題。 他們通過要求為組件指定過渡超時值來“解決”該問題。

Answer 2

使用setTimeout()並等於或大於CSS轉換時間的時間...因此，如果：

transition: all 3s ease;

然后...

function delorean() {
    var image = document.createElement("img");
    image.id = "delorean";
    image.src = "Images/delorean/" + where + ".png";
    document.getElementById("deloreanContainer").appendChild(image);

    setTimeout( function { delelement("deloreanContainer"); }, 3000 );
}

function delelement(elem) {
    var element = document.getElementById(elem);
    while (element.firstChild) { element.removeChild(element.firstChild); }
}