仅限 CSS - 按顺序淡入表格行

Question

我正在查看这样的代码：

.my-element:nth-child(1) {
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.my-element:nth-child(2) {
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.my-element:nth-child(3) {
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

有没有办法在 CSS 中只做某种循环，即在 sudo 代码中：

For each element, delay fadein + 0.1s

然后，我将获得让每一行一个接一个地淡入的效果，而不必专门为第 n 个孩子一直到 50 个编写 CSS。这是我要测试的测试 HTML 表：

https://jsfiddle.net/268n9gcq/

这在不必使用javascript的情况下是可能的吗？

Answer 1

要仅使用 CSS 执行此操作，您需要创建nth-child()规则，因为您已经开始了。更少，Sass 或其他编译器将有助于使您的代码更易于管理，并同时创建一个仅限 CSS 的解决方案。

在 CSS 编译器中，您将创建一个类似于以下内容的循环（对于 SCSS）：

@for $i from 1 through 10 {
  tr:nth-child(#{$i}) {
    $time: $i * 3 + unquote('');
    $delay: unquote('0.' + $time + 's');
    animation-name: showRow;
    animation-duration: 1s;
    animation-delay: $delay; 
    animation-timing-function: ease-in;
  }
}