使用延迟（javascript 或 css）动画将类附加到 div 子项答案

【问题标题】：Attach class to div child with a delay (javascript or css) animation使用延迟（javascript 或 css）动画将类附加到 div 子项
【发布时间】：2022-01-02 20:31:22
【问题描述】：

所以我有这种结构，容器 cc-entry-animation-wrapper 内的每个 div child(.cc-entry-animation-colour) 都有不同的颜色背景，所以我有一个类动画调用关键帧，我想将该类附加到 div 子级 (.cc-entry-animation-color) 但不是同时附加，所以从上到下，可能会延迟一秒钟。

<div class="entry-animation">
  <div class="cc-entry-animation-wrapper">

    <div class="cc-entry-animation-colour green-3"></div>
    <div class="cc-entry-animation-colour green-2"></div>
    <div class="cc-entry-animation-colour green-1"></div>
    <div class="cc-entry-animation-colour blue-3"></div>
    <div class="cc-entry-animation-colour blue-2"></div>
    <div class="cc-entry-animation-colour blue-1"></div>
    <div class="cc-entry-animation-colour violet-3"></div>
    <div class="cc-entry-animation-colour violet-2"></div>
    <div class="cc-entry-animation-colour violet-1"></div>
    <div class="cc-entry-animation-colour red-3"></div>
    <div class="cc-entry-animation-colour red-2"></div>
    <div class="cc-entry-animation-colour red-1"></div>
    <div class="cc-entry-animation-colour orange-3"></div>
    <div class="cc-entry-animation-colour orange-2"></div>
    <div class="cc-entry-animation-colour orange-1"></div>
    <div class="cc-entry-animation-colour yellow-3"></div>
    <div class="cc-entry-animation-colour yellow-2"></div>
    <div class="cc-entry-animation-colour yellow-1"></div>

  </div>
</div>

所以这是班级的样子：

.animate-fan{
    animation:abanico 2s infinite;
  }

  @keyframes abanico {
    from {
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-90deg) skew(0deg, 0deg); transform-style: preserve-3d;
    }
  
    to {
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(90deg) skew(0deg, 0deg); transform-style: preserve-3d;
    }
  }

我也尝试过使用纯 css 来实现这一点，所以我将相同的动画应用于不同的 div 类，但有延迟，请参见下面的示例。

 .cc-entry-animation-colour.yellow-1 {
 /*more attributes here that I am omiting*/
        animation:abanico 2s infinite;
      }

 .cc-entry-animation-colour.yellow-2 {
      /*more attributes here that I am omiting*/
        animation:abanico 2s infinite;
      animation-delay:1s;
      }
 .cc-entry-animation-colour.yellow-3 {
      /*more attributes here that I am omiting*/
        animation:abanico 2s infinite;
      animation-delay:2s;
      }

...etc

但是没有正常工作，不知何故忽略了我在某些方面的延迟，我只能看到前 3 个 div 出于某种原因被动画化。所以我试图通过将 div 一个接一个地旋转 90 角来实现一种“风扇效果”。

【问题讨论】：

标签： javascript css-animations

【解决方案1】：

我不认为这是最好的做法，但我建议你像下面的例子一样：

使用children 属性的querySelectorAll 结果获取所有孩子
为每个孩子应用样式 animationDelay（您需要增加一秒，以便您可以使用 index 为您提供要应用的正确值）

window.addEventListener('load', function() {
  const childs = [...document.querySelectorAll('cc-entry-animation-wrapper').children];

  childs.forEach(function(child, index) {
    child.style.animationDelay = `${index}s`;
  }
});

或者你可以创建一些包含你的延迟的类：

<style>
.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 1s; }
.delay-2 { animation-delay: 2s; }
.delay-3 { animation-delay: 3s; }
</style>

<!-- ... -->

<div class="cc-entry-animation-colour yellow-1 delay-0"></div>

这个可以动态工作，通过在 javascript 中使用 classList 并像我的示例一样静态工作。

【讨论】：