html – 仅限CSS – 按顺序淡入表格行

2019年7月27日 181次阅读

我正在看这样的代码：

.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吗？

最佳答案 要仅使用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;
  }
}
点赞