transition

先看看多任务栏长什么样

为什么要使用动画或者过渡组件

1. 在使用过程中两个任务切换的时候会发现使用体验差，切换看起来很僵硬
2. 如果使用动态异步组件，在新打开任务的时候需要去服务端加载对应的组件，这时候会有一段空白期，过渡组件的过渡时间刚好可以弥补这个空白期从而解决这个问题

那如何使用呢？ 如下

// 部分模板代码
<router-view v-slot="{ Component }">
// 增加此过渡组件, name作为过渡样式的前缀
<transition name="slide-fade">
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
// 动画样式
.slide-fade-enter-active {
transition: all .6s ease-out;
}
.slide-fade-leave-active {
transition: all .3s cubic-bezier, 0.5, 0.8, 1.0);
}
.slide-fade-enter-from,.slide-fade-leave-to {
transform: translateX(20px);
opacity: 0;
}

这样的写法想要的过渡动画确实出现了， 但是会发现有一个很大的缺陷，前一个任务页面还没有执行完离开动画时后一个任务页面的进入动画也开始执行了，导致的结果是两个任务页面的组件叠加了， 那么该如何解决这个问题呢？使用mode属性 如下

<router-view v-slot="{ Component }">
<transition name="slide-fade" mode="out-in">
<keep-alive :include="cacheViews">
<component :is="Component" />
</keep-alive>
</transition>
</router-view>

mode="out-in"意思是先执行完第一个任务页面的离开动画， 然后再执行切换页面的入口动画