问答

css如何完成过渡动画效果

作者:admin 2021-04-22 我要评论

有三列数据展示 每列十行 从第一列第一行 开始浮现 第十行结束后再开始第二列 类推 这个要怎么处理才好 ### 每行每列都加一个动画效果,然后根据延时依此进行设...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

###

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

###

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

###
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`
});

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • css如何完成过渡动画效果

    css如何完成过渡动画效果

  • function声明究竟在词法环境组件还是变

    function声明究竟在词法环境组件还是变

  • AntV 主页这个图怎么做的

    AntV 主页这个图怎么做的

  • vue exports default{}里面的参数的语

    vue exports default{}里面的参数的语

腾讯云代理商
海外云服务器