vue-router 中的过渡动效
<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:<transition><router-view class="center"></router-view></
·
<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:
<transition>
<router-view class="center"></router-view>
</transition>
当然要想要实现过渡效果需要配合过渡的css类名
- v-enter:定义进入过渡的开始状态
- v-enter-active:定义进入活动状态
- v-enter-to:定义进入的结束状态
- v-leave:定义离开过渡的开始状态
- v-leave-active:定义离开的活动状态
- v-leave-to:定义离开的结束状态
看个示例:
<style>
.v-enter{
opacity:0;
}
.v-enter-to{
opacity:1;
}
.v-enter-active{
transition:1s;
}
.v-leave{
opacity:1;
}
.v-leave-to{
opacity:0;
}
.v-leave-active{
transition:2s;
}
</style>
结合官网上的示例图理解一下:
如果想要效果比较好的话还需要添加过渡的模式,一共有两种模式:out-in和in-out
out-in:前一个路由状态离开后再执行当前状态
in-out:当前点击状态进入后再执行前一个路由的离开状态
<transition mode="out-in">
<router-view class="center"></router-view>
</transition>
如果你想让每个路由组件有各自的过渡效果,可以在各路由组件内使用transition,并设置不同的name(此时设置css过渡类的时候,把v-,替换为各自的name-)如下示例:
<transition name="left">
<router-view class="center"></router-view>
</transition>
css设置:(有默认状态的可以省略哈)
.left-enter{
transform:translateX(100%);
}
.left-enter-active{
transition:1s;
}
.left-leave-to{
transform:translateX(-100%);
}
.left-leave-active{
transition:1s;
}
路由的动态过渡:
还可以基于当前路由与目标路由的变化关系,动态设置过渡效果:
<transition :name="names">
<router-view class="center"></router-view>
</transition>
vue中的设置:
<script>
export default {
name: 'App',
data(){
return {
index:'/',
names:'left'
}
},
watch:{
$route(to,from){
//目标导航下标和离开导航下标进行比较
if(to.meta.index<from.meta.index){
this.names = 'left';
}else{
this.names = 'right';
}
}
}
}
</script>
css过渡类:
.v-leave{
opacity:1;
}
.v-leave-to{
opacity:0;
}
.v-leave-active{
transition:2s;
}
.left-enter{
transform:translateX(100%);
}
.left-enter-active{
transition:1s;
}
.left-leave-to{
transform:translateX(-100%);
}
.left-leave-active{
transition:1s;
}
.right-enter{
transform:translateX(-100%);
}
.right-enter-active{
transition:1s;
}
.right-leave-to{
transform:translateX(100%);
}
.right-leave-active{
transition:1s;
}
ok,如果您还想要了解更多,可以参看官网哦:
https://cn.vuejs.org/v2/guide/transitions.html
https://router.vuejs.org/zh/guide/advanced/transitions.html
更多推荐
已为社区贡献32条内容
所有评论(0)