Vue2：使页面淡入“出现”转换并仍然使用路由转换

Question

当我的应用最初加载使用时，我正在尝试淡入页面;但是，我已经在使用路由css动画，当从一个页面到另一个页面时，它会淡入淡出并淡出，但是当它最初加载时，它仍然会让我突然显示我的页面。到目前为止，我尝试以外部嵌套方式在路由转换周围添加另一个转换标记失败。它仍然会突然显示页面。有什么建议吗？

<template>
    <div id="app">
        <v-app>
            <main> 
              <transition  name="appearPageFadeIn" appear><!-- new appear tag -->


                   <cq-nav-mobile></cq-nav-mobile>

                   <cq-nav-desktop></cq-nav-desktop>



                       <transition name="interPageFadeOutIn" mode="out-in">
                            <router-view></router-view>
                       </transition>



                   <cq-footer></cq-footer>

                </transition>
            </main>

        </v-app>
    </div>
</template>

<!-- CSS -->

    /* appear page animation */



.appearPageFadeIn-appear {
    opacity: 0;
}

.appearPageFadeIn-appear-active {
    transition: opacity 1s;
}

/* inter page routing animation */

.interPageFadeOutIn-enter {
    opacity: 0;
}

.interPageFadeOutIn-enter-active {
    transition: opacity 1s;
}

.interPageFadeOutIn-leave {
    opacity: 1; //default
}

.interPageFadeOutIn-leave-active {
    transition: opacity 1s;
    opacity: 0;
}