vue导航切换过渡动画transition的使用

vue导航切换过渡动画transition的使用

过渡的css类名：
v-enter：定义进入过渡的开始状态
v-enter-active：定义进入活动状态
v-enter-to：定义进入结束状态
v-leave：定义离开过渡的开始状态
v-leave-active：定义离开活动状态
v-leave-to：定义离开结束状态

例如：

html:
<transition>
	<router-view></router-view>
</transition>

css:
.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:1s;
}

过渡模式：

1. in-out：新元素先进行过渡，完成之后当前元素过渡离开
2. out-in：当前元素先进行过渡，完成之后新元素过渡进入

过渡模式设置：

<transition model="in-out"></transition>

动态设置name属性左右切换：

html:
<transition name="left">
	<router-view></router-view>
</transition>

css:
.left-enter {
	transform: translateX(100%);
}
.left-enter-to {
	transform: translateX(0);
}
.left-leave{
	transform: translateX(0);
}
.left-leave-to {
	transform: translateX(-100%);
}
.left-leave-active,.left-enter-active {
	transition:1s;
}

设置了name属性，标签会自动寻找以“left”开头的css类名。

插点题外话，什么是路由元信息？
在路由配置中meta可以配置一些数据，用在路由信息对象中。
访问meta数据，可以用$route.meta。