vue-router之过渡动画（六）

1、代码示例

（1）在标签的外部添加标签，标签还需要一个name属性，代码如下：

（2）加入CSS，一共4个CSS类名，四个类名与transition的name属性有关，比如name=”fade”，相应的css如下：

/*页面切换动画*//*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/.fade-enter-active {
    transition: opacity .5s;}/*进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除*/.fade-enter {
    opacity: 0;}/*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/.fade-leave {
    opacity: 1;}/*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/.fade-leave-active {
    opacity:0;
    transition: opacity .5s;}

2、过渡模式mode

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

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