Question

删除代码工作正常，但是我希望在css动画完成后删除元素＆＃34; delorean＆＃34;，然后每次点击按钮时我都需要再次启动动画，我该怎么办使用我的＆＃34; delelement＆＃34;代码实现这个？感谢。

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，你可以添加一个eventlistener ..

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

如何在运行动画后删除此元素？

2 个答案: