背景概述
很多應(yīng)用在加載數(shù)據(jù)的時候，為了避免頁面過于空白，都會用骨架屏的方式來預(yù)告將會有內(nèi)容載入，從而提升用戶體驗
接下來簡單講解一下如何在react應(yīng)用中，通過styled-components實現(xiàn)骨架屏的效果，大致可以分為 靜態(tài)框架 + 動畫效果 兩個部分
靜態(tài)框架
在這個部分，我們需要根據(jù)實際的內(nèi)容，預(yù)先設(shè)置好各個區(qū)塊的寬度、高度以及背景顏色
// 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;
}
`
動畫效果
靜態(tài)值如下：
.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 } 進行引入
下面就對部分關(guān)鍵的CSS屬性值進行簡單講解：
1、linear-gradient：
表示漸變軸位于 水平方向順時針旋轉(zhuǎn)100度的位置
從rgba(255,255,255,0)漸變到rgba(255,255,255,.5)再漸變到rgba(255,255,255,0)
2、background-size：寬度，高度
可以理解為光柱運動場地的范圍大小
我們想讓光柱在水平方向移動，可用百分比設(shè)置它
3、background-position-x：
小于等于0%表示光柱在右邊緣(或者更右邊)，大于等于100%表示光柱在左邊緣(或者更左邊)
由大數(shù)值改變成小數(shù)值就可以實現(xiàn)光柱從左向右移動的效果
4、動畫
background-position-x從160%移動到-20%
例如：原來的區(qū)塊寬度為 100px，高度為50px
background-size設(shè)置為 200% 100%后，光柱的運動場地大小為：200px 50px
動畫開始時，光柱位于 距離原區(qū)塊 左邊緣60px的地方
動畫結(jié)束時，光柱位于 距離原區(qū)塊 右邊緣20px的地方
實現(xiàn)方法
我們可以通過一個flag變量來控制組件的切換
當(dāng)數(shù)據(jù)未載入時，渲染Skeleton組件
當(dāng)數(shù)據(jù)載入后，渲染原來的組件即可
詳細(xì)教程請參考視頻：【CSS】骨架屏效果
