这篇文章主要介绍了浅谈只要css就能实现的骨架屏方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

线上体验地址 https://jsfiddle.net/z13wtr0q/

先说优缺点,毕竟骨架屏实现的方案有很多种

优点

    简单,不需要工程,不用puppeteer生成骨架dom,也不需要二次开发维护 定制程度高,想怎么搞就怎么搞 不臃肿,只给你想要的

缺点

    自动化程度低,需要在骨架dom上手动添加类 协同要求高,不像工程化能通过工程去约束

思路
 

通过伪元素实现骨架样式,通过操作样式实现骨架和页面的动态切换

实现

css部分(scss写法)

通过after伪元素生成骨架样式,并通过absolute覆盖到实际元素上

  .skt-loading {
    pointer-events: none; /* 加载中阻止事件 */
    .skeleton {
      position: relative;
      overflow: hidden;
      border: none !important;
      border-radius: 5px;
      background-color: transparent !important;
      background-image: none !important;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        width: 100%;
        height: 100%;
        background-color: #EBF1F8;
        display: block;
      }
      
      /* 下面这部分都是自定义的,看需求修改 */
      &:not(.not-round)::after {
        border-radius: 4px;
      }
      &:not(.not-before)::before {
        position: absolute;
        top: 0;
        width: 30%;
        height: 100%;
        content: "";
        background: linear-gradient(to right,rgba(255,255,255,0) 0,
            rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
        transform: skewX(-45deg);
        z-index: 99;
        animation: skeleton-ani 1s ease infinite;
        display: block;
      }
      &.badge {
        &::after {
          background-color: #F8FAFC;
        }
      }
    }
  }

  @keyframes skeleton-ani { /* 骨架屏动画 */
    from {
      left: -100%;
    }
    to {
      left: 150%;
    }
  }

html部分

只需要在你认为合理的骨架粒度元素上添加skeleton类即可

js部分

控制好skt-loading类的切换

使用注意

    after伪元素无法插入到inputimg等非容器元素中,所以如果需要添加skleton,则需要再加一层元素将其包裹 对于像vuereact数据驱动页面需要先有mock数据以生成dom

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
滴滴货运完成15亿美元A轮融资 万亿规模同城货运市场暗流涌动

滴滴货运完成15亿美元

不论较早展开市场布局的货拉拉们,还是晚入局的滴滴货运
“交个朋友”回应深圳锤子数码科技有限公司注销

“交个朋友”回应深圳

深圳锤子数码科技有限公司于2021年1月20日变更经营状
支付宝、京东、滴滴等一同出手 互联网存款宣告“死亡”

支付宝、京东、滴滴等

一夜之间,互联网存款“幸存”的申购入口彻底闭合,部分民
深圳锤子数码科技有限公司注销

深圳锤子数码科技有限

深圳锤子数码科技有限公司于2021年1月20日变更经营状
消息称华为消费者业务CEO余承东即将负责华为云与计算BG

消息称华为消费者业务

目前尚不知余承东兼任负责云与计算BG后,上述高管是否会
为满足旅客车票改签实际需求 铁路部门进一步优化车票改签服务

为满足旅客车票改签实

在开车当日24时之前其他列车尚有余票的情况下,旅客可通
最新文章
浅谈只要css就能实现的骨架屏方案

浅谈只要css就能实现

这篇文章主要介绍了浅谈只要css就能实现的骨架屏方案,
5个HTML5的常用本地存储方式详解与介绍

5个HTML5的常用本地存

在HTML5规范之前,存储主要是用cookies,但cookies缺点有
CSS代码检查工具stylelint的使用方法详解

CSS代码检查工具style

stylelint是一个强大的现代CSS检测器,可以让开发者在
针对class、id所做的CSS HACK

针对class、id所做的C

这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK
WEB标准教程:P标签的应用

WEB标准教程:P标签的

从今天开始,我将全面的共享出我所能理解的所有WEB标准
Web前端开发的Firefox插件

Web前端开发的Firefox

一、Web DeveloperWeb Developer 可说是网页设计师最