vue+vue-router轉(zhuǎn)場動畫的實例代碼
更新時間：2018年09月01日 12:00:19 作者：點點悠悠
今天小編就為大家分享一篇vue+vue-router轉(zhuǎn)場動畫的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
Vue+WebPack+HBuilder 項目記錄
項目搭建完畢了，但是由于是單頁應(yīng)用嵌入HBuilder的時候無法利用它的轉(zhuǎn)場動畫，于是找到了vue的轉(zhuǎn)場動畫寫法，使體驗與APP靠近，在此記錄；
1.首先我們要監(jiān)聽路由然后判斷其是前進(jìn)還是后退，來實現(xiàn)不同的動畫
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);
}
上面動畫可作為不同級頁面的轉(zhuǎn)場動畫，下面可作為同級頁面轉(zhuǎn)場動畫，無需監(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)場動畫的實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue el-table實現(xiàn)多選框回填的示例代碼
摘要：Vue多選框回填是實現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實現(xiàn)多選框回填的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
vue watch偵聽器有無immediate的運行順序問題
這篇文章主要介紹了vue watch偵聽器有無immediate的運行順序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue生命周期和鉤子函數(shù)的詳解與經(jīng)典面試題
Vue生命周期是指vue實例對象從創(chuàng)建之初到銷毀的過程,vue所有功能的實現(xiàn)都是圍繞其生命周期進(jìn)行的,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期和鉤子函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要給大家介紹了關(guān)于Vue中插槽slot的使用方法與應(yīng)用場景的相關(guān)資料,插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性,需要的朋友可以參考下2021-06-06
vue3實戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量
這篇文章主要給大家介紹了關(guān)于vue3實戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02
在日常開發(fā)中,特別是管理端,經(jīng)常會遇到要實現(xiàn)拖拽排序的效果,下面這篇文章主要給大家介紹了關(guān)于Vue實用功能之實現(xiàn)拖拽元素、列表拖拽排序的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue+iview使用樹形控件的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
在開發(fā)項目的時候，我們一般都用 vue-cli 來避免繁瑣的 webpack 配置和 template 配置。這篇文章主要介紹了如何寫一個 vue 插件,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了5分鐘學(xué)會Vue動畫效果(小結(jié)),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本文主要介紹了Vue實現(xiàn)固定底部組件的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07