vue+vue-router轉(zhuǎn)場動(dòng)畫的實(shí)例代碼
Vue+WebPack+HBuilder 項(xiàng)目記錄
項(xiàng)目搭建完畢了,但是由于是單頁應(yīng)用嵌入HBuilder的時(shí)候無法利用它的轉(zhuǎn)場動(dòng)畫,于是找到了vue的轉(zhuǎn)場動(dòng)畫寫法,使體驗(yàn)與APP靠近,在此記錄;
1.首先我們要監(jiān)聽路由然后判斷其是前進(jìn)還是后退,來實(shí)現(xiàn)不同的動(dòng)畫
export default { name: 'app', data () { return { transitionName: 'slide-left' } }, watch: { '$route' (to, from) { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } } }
2.template
<transition :name="transitionName"> <router-view class="child-view"></router-view> </transition>
3.css;修改css得到不同的效果。
.child-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; transition: all .6s cubic-bezier(.55,0,.1,1); } .slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(-80px, 0); transform: translate(-80px, 0); } .slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
上面動(dòng)畫可作為不同級(jí)頁面的轉(zhuǎn)場動(dòng)畫,下面可作為同級(jí)頁面轉(zhuǎn)場動(dòng)畫,無需監(jiān)聽路由
1.template
<transition name="slide-fade"> <router-view></router-view> </transition>
2.css
.slide-fade-enter-active { transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; } .slide-fade-leave-active { transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; } .slide-fade-enter{ transform: translateX(20px); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); opacity: 0; } .slide-fade-leave-active { opacity: 0; }
以上這篇vue+vue-router轉(zhuǎn)場動(dòng)畫的實(shí)例代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue el-table實(shí)現(xiàn)多選框回填的示例代碼
摘要:Vue多選框回填是實(shí)現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實(shí)現(xiàn)多選框回填的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01vue watch偵聽器有無immediate的運(yùn)行順序問題
這篇文章主要介紹了vue watch偵聽器有無immediate的運(yùn)行順序問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08Vue生命周期和鉤子函數(shù)的詳解與經(jīng)典面試題
Vue生命周期是指vue實(shí)例對(duì)象從創(chuàng)建之初到銷毀的過程,vue所有功能的實(shí)現(xiàn)都是圍繞其生命周期進(jìn)行的,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期和鉤子函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-10-10vue3實(shí)戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量
這篇文章主要給大家介紹了關(guān)于vue3實(shí)戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序
在日常開發(fā)中,特別是管理端,經(jīng)常會(huì)遇到要實(shí)現(xiàn)拖拽排序的效果,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序的相關(guān)資料,需要的朋友可以參考下2022-10-105分鐘學(xué)會(huì)Vue動(dòng)畫效果(小結(jié))
這篇文章主要介紹了5分鐘學(xué)會(huì)Vue動(dòng)畫效果(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07