通过未知数字sass增加动画持续时间

Question

我想用未知数字增加动画持续时间。这就是我所拥有的：

@for $i from 1 through 10 {
    .rw-words span {
        animation: rotateWord 27s linear infinite 0s;
        &:nth-of-type(#{$i}) {
           animation-delay:$i * 3s;
        }
    }
}

这最多可以达到10个项目，但我需要能够增加每个项目的动画持续时间，但不知道会有多少项目。这是一个循环浏览帖子的WordPress网站，可能有10个或200个。

Answer 1

SASS被预编译为纯CSS，稍后由浏览器加载和解析。没有可能得到元素的数量，因为在编译时，它们是未知的。

Answer 2

正如AndésAndrade所说，Sass编译成纯CSS，并且不知道你可以拥有多少元素。

对我来说，有两种方法可以做到这一点。

第一个是制作“最大动画场景”，这意味着你在循环中硬编码：@for $i from 0 to 500（500或200）

但是你可能会得到很多未使用的CSS。

或者你可以使用javascript，这对我来说是最好的选择。 您将计算您拥有的项目数量，并根据顺序更改动画延迟（item.style.animationDelay = i * 3）