增加动画效果，通过未知数字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

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

---

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

，但您可能会遇到很多未使用的CSS。

---

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