css如何完成过渡动画效果

Krui
  • 95

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

评论
阅读 285
4 个回答

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

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);

}

image.png

样式部分:

.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`
});
撰写回答

登录后参与交流、获取后续更新提醒

宣传栏