将不同的CSS动画委托给单亲的不同子元素。

Question

我可以将两个不同的CSS @keyframe动画从一个父元素委托给两个不同的子元素，在AJAX/Fetch API动态加载的内容中吗？

对于此代码：

HTML

<div class='parent'>
  <div class='child one'>Some text</div>
  <div class='child two'>Other text</div>
</div>

社联(社联)

.parent
  animation: BY 15s infinite alternate

@keyframes BY
  0%
    color: blue
  100%
    color: yellow

两个子元素'.one‘和'.two’中的.one受委托动画的影响。

如果动态地重新加载这些元素，动画就会继续跨重加载，而不是在每次加载时从0%重新启动。

但我需要一个不同的动画'.one‘与’.2‘。因此，如果我直接将动画应用于元素(这是合乎逻辑的)：

社联(社联)

.child.one
  animation: RG 15s infinite alternate

.child.two
  animation: GY 15s infinite alternate

@keyframes RG
  0%
    color: red
  100%
    color: green

@keyframes BY
  0%
    color: blue
  100%
    color: yellow

...whenever i动态地重新加载动画以0%重新启动的元素。

这段代码显示了这种行为：

https://codepen.io/plagasul/pen/WNerBvO

谢谢

Answer 1

我相信这可能与如何在DOM中维护对象有关。因为div class="fixed BY"没有从DOM中删除，所以它是执行初始动画的同一个对象，因此它的动画不间断地继续。

但是，由于它的innerHTML正在发生变化，所发生的是内部DOM对象正在被销毁，新的内容正在创建。在添加到DOM之后，class="RG"动画就开始了，从而创建了这个闪存。