首先得有你想要的過渡效果css代碼：

.vux-pop-out-enter-active,.vux-pop-out-leave-active,.vux-pop-in-enter-active,.vux-pop-in-leave-active { will-change: transform; transition: all 500ms; height: 100%; position: absolute; backface-visibility: hidden; perspective: 1000;}.vux-pop-out-enter { opacity: 0; transform: translate3d(-100%, 0, 0);}.vux-pop-out-leave-active { opacity: 0; transform: translate3d(100%, 0, 0);}.vux-pop-in-enter { opacity: 0; transform: translate3d(100%, 0, 0);}.vux-pop-in-leave-active { opacity: 0; transform: translate3d(-100%, 0, 0);}

給你想要過渡頁面的父元素給上這樣的樣式：

.router-view{  width: 100%;  position: absolute;  -webkit-transition: all .3s cubic-bezier(.55,0,.1,1);  -moz-transition: all .3s cubic-bezier(.55,0,.1,1);  -ms-transition: all .3s cubic-bezier(.55,0,.1,1);  -o-transition: all .3s cubic-bezier(.55,0,.1,1);  transition: all .3s cubic-bezier(.55,0,.1,1);  height:100%; }

html代碼是這樣的：

<template> <div id="app">  <transition :name="transitionName">     <router-view class="router-view"></router-view>  </transition> </div></template>

js代碼是這樣的：

export default {  name: 'app',  data(){   return {    transitionName:'vux-pop-in'   }  }, }

這里的transitionName根據自己的需要去改變，我是監聽路由去改變是vux-pop-in還是vux-pop-out的。

watch:{  $route(to, from) {   if(to.meta.index > from.meta.index){    this.transitionName = 'vux-pop-in';   }else{    this.transitionName = 'vux-pop-out';   }  } }

這里當然要個路由這是參數index，分級。

總結

以上所述是小編給大家介紹的vue頁面切換過渡transition效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！