vue頁面跳轉(zhuǎn)過渡動畫與防止抖動方式
整頁跳轉(zhuǎn)動畫
總是看到別人的頁面有個淡入淡出效果，但是自己一直不知道怎么實(shí)現(xiàn)，感覺不能是每個組件都加一個動畫，于是我去看了vue的官方文檔。
官方給了這兩個東西：
<transition> 元素作為單個元素/組件的過渡效果。 只會把過渡效果應(yīng)用到其包裹的內(nèi)容上，而不會額外渲染 DOM 元素，也不會出現(xiàn)在可被檢查的組件層級中。
元素作為多個元素/組件的過渡效果。 渲染一個真實(shí)的 DOM 元素。默認(rèn)渲染 ，可以通過 tag attribute 配置哪個元素應(yīng)該被渲染。（詳細(xì)內(nèi)容見官方文檔）
經(jīng)過我一番查找研究，弄明白了應(yīng)該怎么使用：
采用<transition> 包裹住路由，這樣就可以實(shí)現(xiàn)路由頁面跳轉(zhuǎn)整個頁面元素的動態(tài)：
<transition>
<router-view></router-view>
</transition>
上面的內(nèi)容自己根據(jù)官方文檔給transition寫個動畫就也可以實(shí)現(xiàn)。
頁面抖動
但是實(shí)現(xiàn)了之后發(fā)現(xiàn)，點(diǎn)擊頁面跳轉(zhuǎn)時頁面有個細(xì)微的往上跑一下就停住，像是抖動一樣。
我查的資料有的說是頁面高度不對需要調(diào)整overflow-x和overflow-y，也有的說是路由跳轉(zhuǎn)的時候上一個路由還占著位置因此用.fade-leave-to屬性，我試了好像也沒什么反應(yīng)。
后來我發(fā)現(xiàn)了一個很簡單的解決方法，就是給<transition>加一個 mode="out-in":
<transition mode="out-in">
<router-view></router-view>
</transition>
這樣就完美解決抖動了！
我的代碼
我用的是ElementUI組件庫，因此代碼是
<transition name="el-fade-in-linear" mode="out-in">
<router-view></router-view>
</transition>
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
keep-alive是Vue提供的一個抽象組件,用來對組件進(jìn)行緩存,從而節(jié)省性能,下面這篇文章主要給大家介紹了關(guān)于vue?Keep-alive組件緩存的簡單使用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
uniapp微信小程序使用webview嵌套u(yù)niappH5并實(shí)現(xiàn)通信詳細(xì)步驟
在開發(fā)微信小程序的時候,我們有時候會遇到將H5頁面嵌入到小程序頁面中的情況,這篇文章主要給大家介紹了關(guān)于uniapp微信小程序使用webview嵌套u(yù)niappH5并實(shí)現(xiàn)通信的詳細(xì)步驟,需要的朋友可以參考下2024-05-05
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包為exe可安裝程序操作步驟的相關(guān)資料,Vue是一種流行的JavaScript框架,用于構(gòu)建單頁面應(yīng)用程序(SPA),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了手寫Vue2.0 數(shù)據(jù)劫持的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了在vue中import()語法不能傳入變量的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在 Vue 3 中，父子組件之間進(jìn)行通信有多種方式，下面簡單介紹下常見的方式及其用法和使用場景，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2024-01-01
組件是可以在它們自己的模板中調(diào)用自身的,不過它們只能通過?name?選項(xiàng)來做這件事,下面這篇文章主要給大家介紹了關(guān)于Vue組件化開發(fā)的必備技能之組件遞歸的相關(guān)資料,需要的朋友可以參考下2022-01-01
Axios 毋庸多說大家在前端開發(fā)中常用的一個發(fā)送 HTTP 請求的庫，用過的都知道,篇文章主要給大家介紹了關(guān)于vue中如何簡單封裝axios的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Vue3中如何使用fullcalendar日歷插件,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue中v-for和v-if一起使用之使用compute的示例代碼
這篇文章主要介紹了vue中v-for和v-if一起使用之使用compute的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05