Vue2路由動畫效果的實現代碼
更新時間：2017年07月10日 09:33:13 作者：xiaogezl
本篇文章主要介紹了Vue2路由動畫效果的實現代碼，可以根據不同的路徑去改變動畫的效果，有興趣的可以了解一下
這篇文章主要講的是路由切換的時候動畫效果的實現，可以根據不同的路徑去改變動畫的效果，以下就是源碼，可供參考：
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
transitionName: 'slide-left'
}
},
mounted () {
},
//監(jiān)聽路由的路徑，可以通過不同的路徑去選擇不同的切換效果
watch: {
'$route' (to, from) {
if(to.path == '/'){
this.transitionName = 'slide-right';
}else{
this.transitionName = 'slide-left';
}
}
}
}
</script>
<style>
.child-view {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}
</style>
路由的api鏈接在這，詳細的可以去看這https://router.vuejs.org/zh-cn/advanced/transitions.html
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue實現兩個區(qū)域滾動條同步滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了通過vue提供的keep-alive減少對服務器的請求次數,文中給大家補充介紹了vue路由開啟keep-alive時的注意點，需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細介紹了vue實現簡單分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue如何修改瀏覽器的標題title問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue 實現websocket發(fā)送消息并實時接收消息
這篇文章主要介紹了vue 實現websocket發(fā)送消息并實時接收消息,項目結合vue腳手架和websocket來搭建，本文給大家分享實例代碼，需要的朋友可以參考下2019-12-12
Vue3+TS+Vite+NaiveUI搭建一個項目骨架實現
本文主要介紹了Vue3+TS+Vite+NaiveUI搭建一個項目骨架實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
最近在學習vue的源碼，總結了幾種vue中父子組件傳遞數據的方法。具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
在Vue前端項目中,可以通過修改配置文件來指定啟動的端口號,本文就來介紹 一下vue項目啟動端口更改的實現,感興趣的可以了解一下2023-10-10
這篇文章主要給大家介紹了關于在vue上使用cesium開發(fā)三維地圖的詳細過程,Cesium是一個強大的JavaScript庫,支持三維地理信息展示,并提供了豐富的地理空間數據可視化功能,需要的朋友可以參考下2023-12-12
vue項目中的public、static及指定不編譯文件問題
這篇文章主要介紹了vue項目中的public、static及指定不編譯文件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03