vue3 trasition进入动画无效，以及roter-view中tratition动画无效的解决方法。首先看代码进入

<template> 
    <section class="app-main">    
        <router-view v-slot="{ Component }">   
            <transition 
            name="fade-transform"
            mode="out-in"
            enter-from-class="fade-transform-enter"
            >        
                <keep-alive :include="cachedViews">
                    <component :is="Component" />
                </keep-alive>
            </transition>
        </router-view>
    </section>
</template>

首先看代码进入效果无效，需要手动指定enter-from-class="自己的进入class" enter-form-class，如果不指定，则只有离开时候的动画有效。

这个在vue2中没有出现，vue3中是这样的，而且只要进入的这一步需要自己指定，参考

vue3js.cn/docs/zh/gui…

不知道是否算是bug。

另外就是router-view中动画无效的问题。

参考next.router.vuejs.org/guide/advan…

但是

<template> 
    <section class="app-main">    
        <router-view v-slot="{ Component }" :key="key">   
            <transition 
            name="fade-transform"
            mode="out-in"
            enter-from-class="fade-transform-enter"
            >        
                <keep-alive :include="cachedViews">
                    <component :is="Component" />
                </keep-alive>
            </transition>
        </router-view>
    </section>
</template>

注意router-view中加了个key，但是这么一加，动画就又无效了，去掉后，完全按照官方给的示例写，是没问题的。

补充：加key没翻译是因为key忘记用ref()设置为响应式的。