vue 初始化请求例子_vue初始化动画加载的实例

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

#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; }

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

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

}

效果如下：

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