VUE首屏做一个加载中的lodaing动画

大家都知道vue是一个单页面（spa）应用，所以他的首屏加载时间是比较长，尤其是用在移动端的时候，从点击链接到加载出页面是一个漫长的过程，在这做首屏加载优化的方法我就不多说了，网上一搜一大把，像资源用cdn加载、路由懒加载、gzip压缩代码等等很多。
今天我们要讲的就是在你做完所有的优化之后，加载还是比较慢的情况下，这个时候我们在首屏加载出来之前给用户一个加载中的动画，不要让用户一直看到空白，这对用户来说还是比较友好的。那话不多说，这个加载中怎么写呢？马上上代码。

首先我们在index.html这个页面加上样式和元素

<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: #4999ff;
      width: 10px;
      height: 10px;
      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>
  </head>
  <body >
    <div id="Loading">
      <div class="loader-inner ball-beat">
         <div></div>
         <div></div>
         <div></div>
      </div>
    </div>

    <div id="app"></div>
  </body>

然后在App.vue 中添加一个钩子把动画删除

created() {
    if( document.getElementById('Loading'))document.getElementById('Loading').remove();
  }

最后编辑于：2020.06.17 14:09:22