将不同的 CSS 动画委托给单个父项的不同子元素答案

【问题标题】：Delegate different CSS animations to different child elements of a single parent将不同的 CSS 动画委托给单个父项的不同子元素
【发布时间】：2019-12-20 23:14:35
【问题描述】：

我能否在 AJAX/Fetch API 动态添加的内容中将两个不同的 CSS @keyframe 动画从一个父元素“委托”到两个不同的子元素？

对于此代码：

HTML

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

CSS (SASS)

.parent
  animation: BY 15s infinite alternate

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

...子元素“.one”和“.two”中的文本都受委托动画的影响。

如果这些元素是动态重新加载的，动画会不断地重新加载，而不是在每次加载时从 0% 重新开始。

但我需要在“.one”上制作不同于“.two”上的动画。因此，如果我将动画直接应用于元素（这是合乎逻辑的）：

CSS (SASS)

.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

...每当我动态重新加载元素时，动画都会以 0% 重新开始。

这个 codepen 显示了这种行为：

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

谢谢

【问题讨论】：

标签： javascript ajax css-animations fetch-api

【解决方案1】：

我相信这可能与对象在 DOM 中的维护方式有关。由于 div class="fixed BY" 没有从 DOM 中删除，因此它与在其上执行初始动画的对象相同，因此它的动画继续不间断。

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

【讨论】：

是的，我相信你是对的。但是将动画绑定到父元素可以解决这个问题，因为任何动态创建的子元素都会以当前百分比从父元素继承动画，而不是重新启动。很清楚，但我的问题是我需要在不同的动态创建的元素上使用不同的动画，它们都是这个父元素的子元素。
所以让我确保我理解，您不仅需要在父母身上制作动画，还需要在个别孩子身上制作动画（为简单起见，我们假设第 n 个孩子）？还是只针对个别儿童？
我可能会问一个 XY 问题。我在这里重写了我的问题：stackoverflow.com/questions/57495419/…