小程序开发模板_vue初始化动画加载的实例

vue初始化动画加载的实例       今天小编就为大家分享一篇vue初始化动画加载的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
meta name="renderer" content="p|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 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初始化动画加载的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。