VueRouter进阶二(过渡动效)

2017-09-13 10:30:51来源:segmentfault作者:Smallmotor人点击

分享
过度动效
在视图层添加动效

< router-view > 是基本的动态组件,我们可以在< router-view >上添加动画效果,用 < transition > 组件给它添加一些过渡效果:


<transation>
<router-view></router-view>
</transation>
在组件上为路由添加动效

有时,我们需要为不同的组件添加不同的动画效果,所以,所以我们可以在各路由组件内使用 < transition > 并设置不同的 name。已达到我们需要要的效果


<template>
<div>
<transation name="a">
<div></div>
</transation>
</div>
</template>
<template>
<div>
<transation name="b">
<div></div>
</transation>
</div>
</template>
基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系,动态设置过渡效果:


<!-- 使用动态的 transition name -->
<transition :name="transitionName">
<router-view></router-view>
</transition>
// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台