将动画移动到另一个div时css动画重新启动答案

【问题标题】：css animation restart when moving animated to another div将动画移动到另一个div时css动画重新启动
【发布时间】：2018-10-24 17:41:27
【问题描述】：

当改变一个div的父元素时，所有的css动画都会重新启动。

是否可以在更改其父元素的同时为 div 设置动画而不重新启动动画？我希望示例的 rotateAnim 只播放一次。

我也尝试过使用 animation-play-state 属性并在 #AnimatedElement 上设置动画。也不行。

fiddle

动画：

#AnimatedElement.animate {
    animation: rotateAnim 6s forwards;
}

开始动画：

const element = document.getElementById("AnimatedElement");
element.classList.add('animate')
setTimeout(_=> {
    const newParent = document.getElementById("parent2");
    newParent.appendChild(element);
}, 2000) // change parent element while animation is still running

【问题讨论】：

标签： javascript html css css-animations

【解决方案1】：

不，这是不可能的。更改父元素后，浏览器引擎将重新计算样式/布局。您的问题的一种可能解决方案是克隆动画元素，将克隆添加到 newParent，同时在动画完成后删除原始 AnimatedElement。

【讨论】：