css如何完成过渡动画效果

Question

有三列数据展示 每列十行 从第一列第一行 开始浮现 第十行结束后再开始第二列 类推 这个要怎么处理才好

Answer 1

每行每列都加一个动画效果，然后根据延时依此进行设置？

Answer 2

就是三组动画，动画执行顺序用定时器来进行间隔。
可以参考https://www.dowebok.com/demo/...

Answer 3

var el = document.querySelectorAll('.item')
for (let index = 0; index < el.length; index++) {
    let v = el[index]
    let time = (index + 1) * 1000
    setTimeout(() => {
        //这里用了jq的动画，你可以自定义
        $(v).slideDown()
    }, time);

}

Answer 4

样式部分:

.content{
  display: flex;
}
.item{
  border: 1px solid;
 margin: 5px;
 width: 100px;
 text-align: center;
 line-height: 40px;
 opacity: 0;
}
@keyframes fade {
  to{
    opacity: 1;
 }
}

html部分(tab展开)

div.content>div.list*3>div.item{$}*10

js部分

const $ = s => document.querySelectorAll(s);
[...$('.list .item')].forEach((it, index) => {
  it.style.animation = `.3s ease-in ${index*0.3}s forwards fade`
});