快捷導(dǎo)航

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

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

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

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

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

廢話不多說，直接上圖

在600元驍龍632安卓測(cè)試機(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)動(dòng)畫效果，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

Vue條件判斷之循環(huán)舉例詳解
在Vue進(jìn)行前端開發(fā)中,條件判斷主要用于根據(jù)不同的條件來決定顯示或隱藏,或者進(jìn)行視圖之間的切換,這篇文章主要給大家介紹了關(guān)于Vue條件判斷之循環(huán)舉例詳解的相關(guān)資料,需要的朋友可以參考下
2024-07-07
Vue實(shí)現(xiàn)圖書管理小案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書管理小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
詳解vue-cli中使用rem,vue自適應(yīng)
這篇文章主要介紹了vue-cli使用rem,vue自適應(yīng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue項(xiàng)目中echarts自適應(yīng)問題的高級(jí)解決過程
雖然老早就看過很多echarts的例子,但自己接觸的項(xiàng)目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中echarts自適應(yīng)問題的高級(jí)解決過程,需要的朋友可以參考下
2023-05-05
vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
vue3+elementui-plus實(shí)現(xiàn)無限遞歸菜單示例代碼
這篇文章主要介紹了vue3+elementui-plus實(shí)現(xiàn)無限遞歸菜單,當(dāng)一個(gè)組件的 key 值發(fā)生變化時(shí),Vue 會(huì)認(rèn)為這是一個(gè)新的組件實(shí)例,會(huì)強(qiáng)制重新創(chuàng)建和渲染這個(gè)組件,本文通過示例代碼詳細(xì)講解,需要的朋友可以參考下
2024-04-04
axios在Vue3中的使用實(shí)例代碼
Axios是一個(gè)基于Promise的HTTP客戶端，用于瀏覽器和Node.js，這篇文章主要介紹了axios在Vue3中的使用,需要的朋友可以參考下
2023-07-07
基于Vue實(shí)現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出
這篇文章主要為大家介紹了三種方法，可以實(shí)現(xiàn)將HTML頁面轉(zhuǎn)為PDF并實(shí)現(xiàn)下載。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下
2022-04-04
vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問題)
這篇文章主要介紹了vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue輕松實(shí)現(xiàn)虛擬滾動(dòng)的示例代碼
移動(dòng)端網(wǎng)頁的日常開發(fā)中,偶爾會(huì)包含一些渲染長(zhǎng)列表的場(chǎng)景，本文主要介紹了vue 虛擬滾動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07