介绍

用于在内容加载过程中展示一组占位图形。

基础用法

<van-skeleton title :row="3" />

分析

分为2块：

• 布局
• 闪烁效果实现

布局

使用flex布局

闪烁效果 （重点）

关键：应用改变透明度opacity的动画 源码：

.van-skeleton {
    animation: van-skeleton-blink @skeleton-animation-duration ease-in-out
      infinite;
}

动画定义：

@keyframes van-skeleton-blink {
  50% {
    opacity: 0.6;
  }
}