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

概述我正在看这样的代码： .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-transi 我正在看这样的代码：

.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;  }}

总结

以上是内存溢出为你收集整理的html – 仅限CSS – 按顺序淡入表格行全部内容，希望文章能够帮你解决html – 仅限CSS – 按顺序淡入表格行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。