五、Vue2.0中transition组件的使用
<transition :name="transitionName">
<router-view class="view app-view"></router-view>
</transition> transition中有name属性用于替换vue钩子函数中的类名。
transition中只能有一个子元素并且该子元素需要有v-show或者v-if来控制是否显示。
过渡CSS类名
transition中的name属性用于 替换 vue钩子函数中的类名transitionName-
transitionName-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
transitionName-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。
transitionName-leave:定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
transitionName-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。
this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'在“watch $route”中，判断页面跳转的“前进”和“后退”时，决定用不同的过渡效果（fold-left还是fold-right）。
六、animation、transform动画效果实现
在上一个主题中，判断页面跳转路径之后，为两种跳转的transition设置不同的类名“fold-left”、“fold-right”。
然后在CSS中，为两种类名设置不同的动画效果(这里以“左滑动”和“右滑动”为例)：
.fold-left-enter-active {
animation-name: fold-left-in;
animation-duration: .3s;
}
.fold-left-leave-active {
animation-name: fold-left-out;
animation-duration: .3s;
}
.fold-right-enter-active {
animation-name: fold-right-in;
animation-duration: .3s;
}
.fold-right-leave-active {
animation-name: fold-right-out;
animation-duration: .3s;
}animation 属性是一个简写属性，用于设置六个动画属性：
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
@keyframes fold-left-in {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
