Vue3中动态组件使用transform标签和Transiton 过渡动画失效的问题

问题1： 在使用vue3-element-admin框架中，发现菜单过渡动画失效了，刚开始以为是框架的问题，后来拉取vue3脚手架发现，vue3当中<transform>标签动画都不可以使用。

原代码：

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

解决方案：经过仔细查看文档，发现在Vue3中需要加一个appear属性：

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

问题2： 加入appear后旧菜单消失可以正常使用动画，但是过渡到新菜单展示时，v-enter-active动画效果失效，过渡动画效果完成了一半…

解决方案：在经过各种调试后，最终还是没有解决，不得已重新写了v-enter-active过渡动画：

原代码：

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

修改后代码：

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

/* 可能为enter失效，拆分为 enter-from和enter-to */
.fade-transform-enter-from {  
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transform-enter-to { 
  opacity: 1;
  transform: translateX(0px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

注：<transform>标签name是 fade-transform，那么动画类名前缀也是fade-transform，例如：fade-transform-leave，fade-transform-enter