vue插件学习（一）制作一个简单的loading插件

首先我们需要了解CSS3的animation属性

我们可以通过W3Cschool去了解这个属性。

animation语法

animation: name duration timing-function delay iteration-count direction;
/**
*name: 需要绑定的keyframe的名称（通俗来说就是动画名称）;
*duration: 完成一次动画需要的时间
*timing-function: 动画执行的速度曲线
*delay: 动画开始执行的延时
*iteration-count: 动画执行的次数
*direction: 动画是否轮流方向播放
*/

制作一个弹跳的加载等待动画

动画的布局

<div class="bounce-loading">
    <div class="block block_1"></div>
    <div class="block block_2"></div>
    <div class="block block_3"></div>
    <div class="block block_4"></div>
</div>

添加样式（我这里使用的是stylus这个css预处理器，不知道的朋友可以自行百度一下，或者戳这里。）

.bounce-loading
    position: relative
    margin: 0
    padding: 0
    width: 60px
    height: 60px
    .block
      width: 5px
      height: 5px
      background: rgb(20, 220, 20)
      &.block_1
        position: absolute
        left: 0
        top: 5px
        animation: bounce 1.5s linear 0.2s infinite normal
      &.block_2
        position: absolute
        left: 10px
        top: 5px
        animation: bounce 1.5s linear 0.4s infinite normal
      &.block_3
        position: absolute
        left: 20px
        top: 5px
        animation: bounce 1.5s linear 0.6s infinite normal
      &.block_4
        position: absolute
        left: 30px
        top: 5px
        animation: bounce 1.5s linear 0.8s infinite normal

动画效果keyframe，这里的命名一定要和animation的参数命名相同。

@keyframes bounce {
    0% {
      transform: translateY(0)
    }
    20% {
      transform: translateY(-15px)
    }
    40% {
      transform: translateY(0)
    }
  }

效果图

bounce-loading.gif

总结

这样我们就完成了一个简单的CSS3加载等待动画，上面我截的效果图有点掉帧的情况，实际效果时候很流畅的。