背景概述
很多应用在加载数据的时候，为了避免页面过于空白，都会用骨架屏的方式来预告将会有内容载入，从而提升用户体验
image.png
接下来简单讲解一下如何在react应用中，通过styled-components实现骨架屏的效果，大致可以分为 静态框架 + 动画效果 两个部分
静态框架
在这个部分，我们需要根据实际的内容，预先设置好各个区块的宽度、高度以及背景颜色
// Skeleton/index.js
import React, {Component} from 'react'
import {
Item,
Info
} from './style'
class Skeleton extends Component {
constructor(props) {
super(props)
}
render(){
return (
<Item>
<div className="img-wrapper" />
<Info>
<div className="loading name"></div>
<div className="loading desc"></div>
<div className="loading delivery"></div>
</Info>
</Item>
)
}
}
export default Skeleton
CSS部分如下：
import styled, {keyframes} from 'styled-components'
export const Item = styled.div`
width: 94%;
min-height: 100px;
margin: 0 auto 5px;
padding: 3%;
border-radius: 5px;
border: .5px solid #E8E8E8;
box-sizing: border-box;
background-color: white;
.img-wrapper {
display: block;
float: left;
width: 99px;
min-height: 74px;
background-color: #ededed;
}
`
export const Info = styled.div`
display: block;
float: left;
width: 58%;
margin-left: 15px;
.name {
width: 100%;
min-height: 18px;
margin-bottom: 8px;
background-color: #ededed;
}
.desc {
width: 100%;
min-height: 16px;
margin-bottom: 8px;
background-color: #ededed;
}
.delivery {
width: 100%;
min-height: 16px;
background-color: #ededed;
}
`
动画效果
静态值如下：
.loading {
background-color: #ededed;
background: linear-gradient(
100deg,
rgba(255,255,255,0) 40%,
rgba(255,255,255,.5) 50%,
rgba(255,255,255,0) 60%
) #ededed;
background-size: 200% 100%;
background-position-x: 160%;
animation: 1s ${skeletonLoading} ease-in-out infinite;
}
动画定义如下：
const skeletonLoading = keyframes`
to {
background-position-x: -20%;
}
`
编写动画样式时，别忘了在文件顶部对 { keyframes } 进行引入
下面就对部分关键的CSS属性值进行简单讲解：
1、linear-gradient：
表示渐变轴位于 水平方向顺时针旋转100度的位置
从rgba(255,255,255,0)渐变到rgba(255,255,255,.5)再渐变到rgba(255,255,255,0)
2、background-size：宽度，高度
可以理解为光柱运动场地的范围大小
我们想让光柱在水平方向移动，可用百分比设置它
3、background-position-x：
小于等于0%表示光柱在右边缘(或者更右边)，大于等于100%表示光柱在左边缘(或者更左边)
由大数值改变成小数值就可以实现光柱从左向右移动的效果
4、动画
background-position-x从160%移动到-20%
例如：原来的区块宽度为 100px，高度为50px
background-size设置为 200% 100%后，光柱的运动场地大小为：200px 50px
动画开始时，光柱位于 距离原区块 左边缘60px的地方
动画结束时，光柱位于 距离原区块 右边缘20px的地方
实现方法
我们可以通过一个flag变量来控制组件的切换
当数据未载入时，渲染Skeleton组件
当数据载入后，渲染原来的组件即可
详细教程请参考视频：【CSS】骨架屏效果
