鍍金池/ 問答/HTML5  HTML/ vue中使用跳路由的方式切換內(nèi)容，無法使用vue的transition動畫。怎么

vue中使用跳路由的方式切換內(nèi)容，無法使用vue的transition動畫。怎么樣才能讓這個動畫生效？

我之前是使用v-if實現(xiàn)切換的，這樣可以使用transition動畫，
現(xiàn)在領(lǐng)導(dǎo)讓換成了轉(zhuǎn)路由的方式來切換，導(dǎo)致transition動畫失效了，這種情況我該怎么處理。

回答
編輯回答
兔寶寶

<transition :name="transitionName">

<router-view class="child-view"></router-view>

</transition>

添加watch:
watch:{

'$route':function(to,from){
//添加路由切換過渡動畫
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'

}
}

2018年5月27日 03:59
編輯回答
離殤

<transtion name="slide-fade">

<router-link to="/"></router-link>

<transtion>

2018年7月29日 23:27
編輯回答
久舊酒

路由過渡效果要再App.vue的router-view上設(shè)置
clipboard.png

2017年9月13日 21:20