vue-router：过渡动画

发表于 | 分类于 ， | 阅读 次
过渡动画

代码示例

  • 在<router-view>标签外部添加<transition>标签，标签还需要一个name属性：
1
2
3
<transition name="fade" mode="out-in">
    <router-view />
</transition>
  • 加入CSS，一共6个CSS类名：v-enter，v-enter-active，v-enter-to，v-leave，v-leave-active，v-leave-to，类名与transition的name属性有关，比如name=”fade”，相应的css如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*页面切换动画*/
/*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/
.fade-enter-active {
    transition: opacity .5s;
}
/*进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除*/
.fade-enter {
    opacity: 0;
}
/*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/
.fade-leave {
    opacity: 1;
}
/*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/
.fade-leave-active {
    opacity:0;
    transition: opacity .5s;
}

看图理解
文档 过渡的类名

过渡模式mode

  • in-out：新元素先进入过渡，完成之后当前元素过渡离开，默认模式。
  • out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入。

参考教程