Vue防止白屏添加首屏动画
生活随笔
收集整理的這篇文章主要介紹了
Vue防止白屏添加首屏动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
單頁應用有個無法避免的問題就是首屏加載慢，雖然可以通過gzip、路由懶加載、CDN、提高服務器帶寬等手段，首屏加載速度仍然比傳統多頁應用慢一些。
為了提高用戶體驗，首屏添加loading動畫很有必要，并且實現特別簡單。
vue-cli3生成的項目中，打開index.html會發現如下代碼
<body><noscript><strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --> 復制代碼我們只需要在這個div中插入loading代碼即可,vue初始化完成后會自動替換
<div id="app">此處插入loading代碼</div> 復制代碼以下是我實現的一種動畫效果，可自行替換
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta http-equiv="X-UA-Compatible" content="chrome=1"/><link rel="icon" href="<%= BASE_URL %>favicon.ico"><link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1112431_q8oa3yvrwbh.css"><title>demo</title><style>.spinner {margin: 100px auto;width: 50px;height: 60px;text-align: center;font-size: 10px;}.spinner > div {background-color: #FE3C71;height: 100%;width: 6px;display: inline-block;-webkit-animation: stretchDelay 1.2s infinite ease-in-out;animation: stretchDelay 1.2s infinite ease-in-out;}.spinner .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}.spinner .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}.spinner .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}.spinner .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}@-webkit-keyframes stretchDelay {0%, 40%, 100% {-webkit-transform: scaleY(0.4)}20% {-webkit-transform: scaleY(1.0)}}@keyframes stretchDelay {0%, 40%, 100% {transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}20% {transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}</style> </head> <body> <noscript><strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"><div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div> </div> <!-- built files will be auto injected --> </body> </html> 復制代碼轉載于:https://juejin.im/post/5cbd75a1e51d456e79545c86
總結
以上是生活随笔為你收集整理的Vue防止白屏添加首屏动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript中十个一步拷贝数组的
- 下一篇： vue基础知识（一）