Vue仿微信app頁(yè)面跳轉(zhuǎn)動(dòng)畫效果
10:14:11獨(dú)立開發(fā)者在開發(fā)移動(dòng)端產(chǎn)品時(shí)，為了更高效，通常會(huì)使用Web技術(shù)來(lái)開發(fā)移動(dòng)端項(xiàng)目，可以同時(shí)適配Android、iOS、H5，稍加改動(dòng)還可適配微信小程序。
在使用Vue.js開發(fā)移動(dòng)端頁(yè)面的時(shí)候，默認(rèn)的組件轉(zhuǎn)場(chǎng)效果過(guò)于生硬，根本就沒有動(dòng)畫效果。于是我用Vue提供的組件過(guò)渡功能，寫了個(gè)仿微信app頁(yè)面跳轉(zhuǎn)的動(dòng)畫，以提高用戶體驗(yàn)。
廢話不多說(shuō)，直接上圖
在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ò)渡相關(guān)文檔 https://cn.vuejs.org/v2/guide/transitions.html
總結(jié)
以上所述是小編給大家介紹Vue仿微信app頁(yè)面跳轉(zhuǎn)動(dòng)畫效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
- Vue this.$router.push(參數(shù))實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)操作
- Vue頁(yè)面跳轉(zhuǎn)傳遞參數(shù)及接收方式
- vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作
- Vue項(xiàng)目頁(yè)面跳轉(zhuǎn)時(shí)瀏覽器窗口上方顯示進(jìn)度條功能
- vue從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面并攜帶參數(shù)的解決方法
- vue登錄頁(yè)面cookie的使用及頁(yè)面跳轉(zhuǎn)代碼
- Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法
- 對(duì)vue2.0中.vue文件頁(yè)面跳轉(zhuǎn)之.$router.push的用法詳解
- vue 實(shí)現(xiàn)axios攔截、頁(yè)面跳轉(zhuǎn)和token 驗(yàn)證
- vue 頁(yè)面跳轉(zhuǎn)的實(shí)現(xiàn)方式
相關(guān)文章
在Vue進(jìn)行前端開發(fā)中,條件判斷主要用于根據(jù)不同的條件來(lái)決定顯示或隱藏,或者進(jìn)行視圖之間的切換,這篇文章主要給大家介紹了關(guān)于Vue條件判斷之循環(huán)舉例詳解的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書管理小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了vue-cli使用rem,vue自適應(yīng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue項(xiàng)目中echarts自適應(yīng)問(wèn)題的高級(jí)解決過(guò)程
雖然老早就看過(guò)很多echarts的例子,但自己接觸的項(xiàng)目中一直都沒有真正用到過(guò),直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中echarts自適應(yīng)問(wèn)題的高級(jí)解決過(guò)程,需要的朋友可以參考下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)無(wú)限遞歸菜單示例代碼
這篇文章主要介紹了vue3+elementui-plus實(shí)現(xiàn)無(wú)限遞歸菜單,當(dāng)一個(gè)組件的 key 值發(fā)生變化時(shí),Vue 會(huì)認(rèn)為這是一個(gè)新的組件實(shí)例,會(huì)強(qiáng)制重新創(chuàng)建和渲染這個(gè)組件,本文通過(guò)示例代碼詳細(xì)講解,需要的朋友可以參考下2024-04-04
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頁(yè)面轉(zhuǎn)為PDF并實(shí)現(xiàn)下載。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04
vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問(wèn)題)
這篇文章主要介紹了vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問(wèn)題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue輕松實(shí)現(xiàn)虛擬滾動(dòng)的示例代碼
移動(dòng)端網(wǎng)頁(yè)的日常開發(fā)中,偶爾會(huì)包含一些渲染長(zhǎng)列表的場(chǎng)景，本文主要介紹了vue 虛擬滾動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07