将动画移至另一个div时css动画重新启动

Question

更改div的父元素时，所有css动画都会重新启动。

是否可以在更改div父元素的同时为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

Answer 1

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