VUE首屏做一个加载中的lodaing动画
2020-06-17 本文已影响0人
追风少年_hxb
大家都知道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();
}
