(八) 路由的过渡动画

本节知识点

• 在转换的时候增加过渡动画效果

使用 <transition>标签

• 想要路由有过渡动画效果只需要在<router-view>外部加载一个<transition>标签即可

<transition name="fade" model="out-in">
   <router-view></router-view>
</transition>

name 就是css类前面开头指定的名称。
model 就是执行的顺序。他有两个 第一个是out-in第二个是in -out

• 在app.vue里面写类

.fade-enter{ opacity:0;}
.fade-leave{opacity:1;}
.fade-enter-active{transition:opacity 0.5s;}
.fade-leave-active{opacity:0;transition:opacity: 0.5s;}