vue的transition动画条上下跳动

vue部分

<router-view v-slot="{ Component }">
    <transition name="fade">
        <keep-alive :max="10">
            <component :is="Component"></component>
        </keep-alive>
    </transition>
</router-view>

css部分

.fade-enter-from{
    opacity: 0;
}
.fade-enter-to{
    opacity: 1;
}
.fade-leave-from{
    opacity: 1;
}
.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
    transition: all 0.3s;
}

问题原因：进入和退出的动画时间一致，上一个页面还没完全退出，下一个页面就进来了，导致在上个页面完全退出的时候，下一个页面直接跳上去，会出现跳动的情况
解决办法：延迟页面进入的动画时间，例如我们进入和退出的动画时间都是0.3秒，那么我们就让新页面等待0.3秒再进来，等待0.3秒是等待上个页面离开的时间，如何你设置的动画时间是其他秒数，延迟对应时间即可

/* 延迟页面进入时间 */
.fade-enter-active{
    transition-delay: 0.3s;
}