Vue仿微信app頁面跳轉(zhuǎn)動畫效果

更新時間：2019年08月21日 10:33:37 作者：IT獨立開發(fā)者

這篇文章主要介紹了Vue仿微信app頁面跳轉(zhuǎn)動畫效果，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下

10:14:11獨立開發(fā)者在開發(fā)移動端產(chǎn)品時，為了更高效，通常會使用Web技術(shù)來開發(fā)移動端項目，可以同時適配Android、iOS、H5，稍加改動還可適配微信小程序。

在使用Vue.js開發(fā)移動端頁面的時候，默認(rèn)的組件轉(zhuǎn)場效果過于生硬，根本就沒有動畫效果。于是我用Vue提供的組件過渡功能，寫了個仿微信app頁面跳轉(zhuǎn)的動畫，以提高用戶體驗。

廢話不多說，直接上圖

在600元驍龍632安卓測試機(jī)效果流暢。

代碼量很少,已上傳至GitHub https://github.com/YellowDoing/vue-route-transition

核心代碼

<transition :name="this.$store.routeAction">
<router-view/>
</transition>

CSS

.push-enter-active,.push-leave-active
, .pop-enter-active,.pop-leave-active{
transition: all 0.4s;
}
.push-leave-to{
transform: translate(-20%,0);
}
.push-enter {
transform: translate(100%, 0);
}
.push-enter-active {
z-index: 10;
}
.push-leave-active {
z-index: 0;
}
.pop-leave-active {
transform: translate(100%, 0);
z-index: 11;
}
.pop-enter{
transform: translate(-20%,0);
}

Vue.js組件過渡相關(guān)文檔 https://cn.vuejs.org/v2/guide/transitions.html

總結(jié)

以上所述是小編給大家介紹Vue仿微信app頁面跳轉(zhuǎn)動畫效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

element-ui動態(tài)級聯(lián)選擇器回顯問題詳解(二十多行代碼搞定）
大家在使用element-ui的時候肯定會遇到這樣一個問題,就是在你使用級聯(lián)選擇器的回顯問題,下面這篇文章主要給大家介紹了關(guān)于element-ui動態(tài)級聯(lián)選擇器回顯問題的相關(guān)資料,需要的朋友可以參考下
2023-03-03
詳解如何在vue項目中設(shè)置首頁
這篇文章主要給大家介紹如何在vue項目中設(shè)置首頁,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12
vue獲取當(dāng)前路由的五種方式示例代碼
這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前路由的五種方式,文中通過代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2023-08-08
Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決
這篇文章主要介紹了Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
關(guān)于Vue?CLI3中啟動cli服務(wù)參數(shù)說明
這篇文章主要介紹了關(guān)于Vue?CLI3中啟動cli服務(wù)參數(shù)說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
uni-app中App與webview雙向?qū)崟r通信詳細(xì)代碼示例
在移動應(yīng)用開發(fā)中,uni-app是一個非常流行的框架,它允許開發(fā)者使用一套代碼庫構(gòu)建多端應(yīng)用,包括H5、小程序、App等,這篇文章主要給大家介紹了關(guān)于uni-app中App與webview雙向?qū)崟r通信的相關(guān)資料,需要的朋友可以參考下
2024-07-07
vue中使用mixins/extends傳入?yún)?shù)的方式
這篇文章主要介紹了vue中使用mixins/extends傳入?yún)?shù)的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
在vue-cli3中使用axios獲取本地json操作
這篇文章主要介紹了在vue-cli3中使用axios獲取本地json操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
純前端使用Vue3上傳文件到minio文件服務(wù)器(粘貼可直接用)
vue是目前最流行的前端框架,下面這篇文章主要給大家介紹了關(guān)于純前端使用Vue3上傳文件到minio文件服務(wù)器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-04-04
Vue+ElementUI table實現(xiàn)表格分頁
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI table實現(xiàn)表格分頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12