美文网首页
vue插件学习(一)制作一个简单的loading插件

vue插件学习(一)制作一个简单的loading插件

作者: RoweYao | 来源:发表于2018-10-24 17:49 被阅读0次

    首先我们需要了解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加载等待动画,上面我截的效果图有点掉帧的情况,实际效果时候很流畅的。

    相关文章

      网友评论

          本文标题:vue插件学习(一)制作一个简单的loading插件

          本文链接:https://www.haomeiwen.com/subject/tcjxtqtx.html