使用JS循环设置.fade-in-row元素animation-delay不生效问题

问题分析 #

你原来的JS代码不生效有几个核心问题：

1. 选择器错误：.green-text :nth-child(${i})里的空格是后代选择器，会匹配.green-text下所有层级的第i个子元素，而非直接子元素.fade-in-row
2. 目标元素错了：你给.fade-in-row的子元素h1设置了延迟，但动画本身是绑定在.fade-in-row类上的
3. 缺少单位：animationDelay必须带时间单位（比如s），你只写了i/4浏览器无法识别
4. 循环逻辑冗余：没必要用无限循环判断元素是否存在，直接获取所有目标元素遍历更高效

修正后的JS方案 #

直接获取所有.fade-in-row元素，遍历设置延迟：

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const fadeElements = document.querySelectorAll('.fade-in-row');
  fadeElements.forEach((el, index) => {
    // 第一个元素(index=0)延迟0s，第二个(index=1)延迟0.25s，以此类推
    el.style.animationDelay = `${index * 0.25}s`;
  });
});

更优的纯CSS方案（无需JS） #

如果不想用JS，可以用CSS计数器+变量实现动态延迟，完全适配任意数量的元素：

/* 初始化计数器 */
.green-text {
  counter-reset: fade-index;
}

.fade-in-row {
  animation: fadeDown 0.5s both;
  /* 每次递增计数器 */
  counter-increment: fade-index;
  /* 使用计数器值计算延迟，计数器从1开始，所以减1后乘以0.25s */
  animation-delay: calc((counter(fade-index) - 1) * 0.25s);
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

这个CSS方案无需依赖JS，不管.fade-in-row有多少个，都会自动依次递增0.25s的延迟，比JS更简洁可靠。

内容的提问来源于stack exchange，提问作者AndryAndryAndry