VUE運行速度快，但是首次加載白屏時間太長，用戶體驗不好，特意加上加載提示動畫
直接在index.html上加，有二個重點提示
1.CSS Style必須放在APP導入前，否則沒作用
2.在APP的Created()需要加一段將此物件取消
document.body.removeChild(loading);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>見縫插針EOS</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 style="margin: 0">
<div id="Loading"> <div class="loader-inner ball-beat">
<div></div> <div></div> <div></div>
</div>
</div>
<div id="app"></div>
</body> <meta name="viewport" content="user-scalable=no" />
</html>
网友评论