代码示例

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

  1. <transition name="fade" mode="out-in">
  2.     <router-view />
  3. </transition>

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

  1. /*页面切换动画*/
  2. /*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/
  3. .fade-enter-active {
  4.     transition: opacity .5s;
  5. }
  6. /*进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除*/
  7. .fade-enter {
  8.     opacity: 0;
  9. }
  10. /*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/
  11. .fade-leave {
  12.     opacity: 1;
  13. }
  14. /*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/
  15. .fade-leave-active {
  16.     opacity:0;
  17.     transition: opacity .5s;
  18. }

过渡模式

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