javascript - 当元素被另一个元素替换时继续动画

Question

如果我有一个元素，它有一个 CSS 动画。

3 秒后，Javascript 将元素替换为另一个新元素(但相同的 div 元素)。

我希望新元素继续动画剩余未完成的部分但不重新开始动画。

是否可以实现？

function replaceDIV(){
    var elm = document.getElementsByTagName("div")[0];
    var new_elm = document.createElement("div");
    new_elm.innerHTML = "New Element";
    new_elm.style.backgroundColor = "green";
    elm.parentNode.replaceChild(new_elm,elm);
}
setTimeout(function(){
    replaceDIV();
}, 3000);

div {
    color: #FFF;
    width: 150px;
    height: 150px;
    position: relative;
    -webkit-animation: mymove 8s linear forwards;
    animation: mymove 8s linear forwards;
}

@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 500px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 500px;}
}

<div style="background-color: red;">Original Element</div>

如何在DIV变成新的DIV后继续剩余未完成的CSS动画？

是否可以只用CSS来实现？或者它必须使用 Javascript？

Answer 1

为容器 div 设置动画然后换出内部 div 将使您获得所需的解决方案。

问题是，当您换出相同的 dom 元素时，它有效地将 CSS 动画重置为开头——但如果您正在为容器设置动画并换出内部元素，则不会中断任何内容。

在下面的代码片段中:

• 创建.container-div
• 更新后的 CSS 应用于该容器 div
• var elm 声明的更新索引

function replaceDIV(){
    var elm = document.getElementsByTagName("div")[1];
    var new_elm = document.createElement("div");
    new_elm.innerHTML = "New Element";
    new_elm.style.backgroundColor = "green";
    elm.parentNode.replaceChild(new_elm,elm);
}
setTimeout(function(){
    replaceDIV();
}, 3000);

.container-div {
    color: #FFF;
    width: 150px;
    height: 150px;
    position: relative;
    -webkit-animation: mymove 8s linear forwards;
    animation: mymove 8s linear forwards;
}

@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 500px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 500px;}
}

<div class="container-div"><div style="background-color: red;">Original Element</div></div>