如何基于子元素索引设置递增CSS过渡延迟？纯CSS/Sass实现

纯CSS实现 #

如果不想依赖预处理器，有两种可行方案：

方案1：HTML内联CSS变量 #

给每个子span添加--index变量标记它的位置，然后在CSS中通过calc()计算延迟：

<span class="ui-e-num"> 
    <span style="--index: 1">1</span>
    <span style="--index: 2">3</span>
    <span style="--index: 3">5</span>
    <span style="--index: 4">+</span>
</span>

.ui-e-num.active span {
    /* 原有激活样式 */
    opacity: 1;
    translate: 0 0;
    text-shadow: 0 0 0 transparent;
    filter: blur(0);
    /* 新增延迟计算 */
    transition-delay: calc(100ms * var(--index));
}

这种方式完全纯CSS，且灵活适配任意数量的子元素。

方案2：:nth-child()批量声明 #

如果子元素数量固定且不多，可以直接用:nth-child()逐个设置：

.ui-e-num.active span:nth-child(1) { transition-delay: 100ms; }
.ui-e-num.active span:nth-child(2) { transition-delay: 200ms; }
.ui-e-num.active span:nth-child(3) { transition-delay: 300ms; }
.ui-e-num.active span:nth-child(4) { transition-delay: 400ms; }

缺点是子元素数量变化时需要手动修改CSS。

优化后的Sass方案 #

相比foreach，用Sass的@for循环更简洁直观，只需定义步长和最大子元素数量即可自动生成所有规则：

$delay-step: 100ms;
$max-count: 10; // 根据组件实际支持的最大数字个数调整

.ui-e-num.active {
    @for $i from 1 through $max-count {
        span:nth-child(#{$i}) {
            transition-delay: $delay-step * $i;
        }
    }
}

@for写法比foreach更清爽，足够满足绝大多数场景；如果需要动态适配任意数量子元素，也可以结合HTML的data-*属性配合循环生成规则。

内容的提问来源于stack exchange，提问作者Lucas M. Falbo