文章正文

vue初始化动画加载

【文章】2020-04-23

简介vue初始化动画加载

1.在入口文件index.html中加入loading动画：

<!DOCTYPE html><html>
 <head>
   <meta charset="utf-8">
   <meta name="renderer" content="webkit|ie-comp|ie-stand">
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
   <!--浏览器兼容模式用最新的文档渲染模式-->
   <meta http-equiv="X-UA-Compatible" content ="IE=edge"/>
   <title></title>
   <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 > p { 
         background-color: #279fcf;        
         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 > p:nth-child(2n-1) {        
         -webkit-animation-delay: 0.35s !important;        
         animation-delay: 0.35s !important; 
     }
   </style>

 </head>
 <body>
   <p id="Loading">
     <p class="loader-inner ball-beat">
       <p></p>
       <p></p>
       <p></p>
     </p>
   </p>
   <p id="app"></p>
   <!-- built files will be auto injected -->
 </body>
</html>

2.在app.vue的created方法中：created() {

document.body.removeChild(document.getElementById('Loading'))
}

打赏支持

感谢您的支持，加油!