Vue SPA 初次進入加載動畫實現(xiàn)代碼
更新時間:2019年11月14日 09:48:30 作者:川大寶啊
今天小編就為大家分享一篇Vue SPA 初次進入加載動畫實現(xiàn)代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
在app掛載的div同級處寫一個加載動畫,例如:
<body class="font-hei"> <div class="wrap" id="loader"> <div> <div class="mult2rect mult2rect1"></div> <div class="mult2rect mult2rect2"></div> <div class="mult2rect mult2rect3"></div> <div class="mult2rect mult2rect4"></div> <div class="mult2rect mult2rect5"></div> </div> </div> <div id="app" style="min-height: 100vh"></div>
加載完成后,在App.vue的鉤子函數(shù)內(nèi)移除這個div。
created: function() { document.body.removeChild(document.getElementById('loader')); }
以上這篇Vue SPA 初次進入加載動畫實現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
element-ui中實現(xiàn)tree子節(jié)點部分選中時父節(jié)點也選中
這篇文章主要介紹了element-ui中實現(xiàn)tree子節(jié)點部分選中時父節(jié)點也選中的方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue2結(jié)合element-ui的gantt圖實現(xiàn)可拖拽甘特圖
因為工作中要用到甘特圖,所以我在網(wǎng)上搜索可以用的甘特圖,搜索了好多,但是網(wǎng)上搜到大多數(shù)都很雞肋,不能直接使用,下面這篇文章主要給大家介紹了關(guān)于vue2結(jié)合element-ui的gantt圖實現(xiàn)可拖拽甘特圖的相關(guān)資料,需要的朋友可以參考下2022-11-11淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法
下面小編就為大家分享一篇淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03關(guān)于vue使用ant design vue,打包后a-date-picker控件無法選擇日期的問題
這篇文章主要介紹了關(guān)于vite .env.test環(huán)境使用ant design vue,打包后a-date-picker控件無法選擇日期的問題,本文針對這個問題提供了解決方法,需要的朋友可以參考下2023-04-04vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細教程
這篇文章主要介紹了vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細教程,其中聲明式router-link實現(xiàn)跳轉(zhuǎn)最簡單的方法,可用組件router-link來替代a標簽,每種方式給大家講解的非常詳細需要的朋友可以參考下2022-11-11