猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vue 首页加载的时候防止白屏添加loading动画

2017-11-23 11:29:47 作者:yxl 次阅读 vue

1、在index.html中作出以下修改(在body中添加一个加载loading动画的box),添加动画效果
<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>
 <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>
2、然后在App.vue 中添加一个钩子把动画除去

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

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: Vue
0

网友评论