這篇文章主要講的是路由切換的時候動畫效果的實現，可以根據不同的路徑去改變動畫的效果，以下就是源碼，可供參考：
<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 () {
},
//監聽路由的路徑，可以通過不同的路徑去選擇不同的切換效果
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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
