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 > div {
 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 > 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>
 <!-- built files will be auto injected -->
 </body>
</html>

2.在app.vue的created方法中：

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

效果如下：

以上这篇vue初始化动画加载的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。