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个孩子编写CSS直到50个。这是我测试的测试HTML表：

https://jsfiddle.net/268n9gcq/

这可以在不使用javascript的情况下实现吗？

Answer 1

要仅使用CSS执行此操作，您需要创建nth-child()规则，因为您已经开始了。 Less，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;
  }
}

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

1 个答案: