时间戳

首页 > 解决方案 > 将不同的 CSS 动画委托给单个父项的不同子元素

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

问题描述

我可以在 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

谢谢

标签： javascriptajaxcss-animationsfetch-api

解决方案

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

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

推荐阅读