VUE加载动画3步就搞定

最新推荐文章于 2024-08-04 16:45:33 发布

呼啦啦画酱

最新推荐文章于 2024-08-04 16:45:33 发布

阅读量3.5k

点赞数 3

分类专栏：总结文章标签：加载动画 vue

本文链接：https://blog.csdn.net/qq_42484025/article/details/88720118

版权

总结专栏收录该内容

23 篇文章 0 订阅

订阅专栏

这个蛮简单的，蛮写一下
思路：在index.html文件的body中写一个id为Loading的div，然后再created生命周期的时候判断这个div是否存在，存在的话就移除。（建议用css写动画，减少资源占用）

created: function(){
        document.body.removeChild(document.getElementById('Loading'));
    },

html内容如下

<!--加载中的动画-->
  <div id="Loading">
      <div class="loader-inner ball-beat">
          <div></div>
          <div></div>
          <div></div>
      </div>
  </div>

附小动画样式代码：

<!-- 加载动画样式控制 -->
    <style type="text/css">
        #Loading {
            top:50%;
            left:50%;
            position: absolute;
            -webkit-transform: translateY(-50%)  translateX(-50%);
            transform: translateY(-50%)  translateX(-50%);
            z-index:100;
        }
        @-webkit-keyframes ball-beat {
            50% {
                opacity: 0.2;
                -webkit-transform: scale(0.75);
                transform: scale(0.75); }

            100% {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1); } }

        @keyframes ball-beat {
            50% {
                opacity: 0.2;
                -webkit-transform: scale(0.75);
                transform: scale(0.75); }

            100% {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1); } }

        .ball-beat > div {
            background-color: #5D9BFF;
            width: 15px;
            height: 15px;
            border-radius: 100% !important;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block;
            -webkit-animation: ball-beat 0.7s 0s infinite linear;
            animation: ball-beat 0.7s 0s infinite linear; }
        .ball-beat > div:nth-child(2n-1) {
            -webkit-animation-delay: 0.35s !important;
            animation-delay: 0.35s !important; }
    </style>

三步搞定~