vue3的router-view上使用transition失效

• 写法

<router-view class="view" v-slot="{ Component }">
    <transition name="fade" mode="out-in">
        <component :is="Component"/>
    </transition>
</router-view>
<style>
    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }
    .fade-enter-to,
    .fade-leave-from {
        opacity: 1;
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: 0.5s ease;
    }
</style>

• vue3后router-view需要配合component加过滤动画
• 如果界面会同时出现，可以加上mode配置，具体配置可以查看官网
• 注意css动画-from标签，需要加上。

• vue3后template支持多个根节点

  <!-- A1界面 -->
  <template>
  	<div>A1</div>
  	<div>A1</div>
  </template>
  <!-- A2界面 -->
  <template>
  	<div>A2</div>
  	<div>A2</div>
  </template>
  
  

  • transition只能包含一个根元素才能有过滤动画效果

  • 多个根元素只能使用transition-gruop，可是router-view中过滤不能使用会报错

    TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    

  • 可以像vue2一样再包一层，暂时可以解决

    <!-- A1界面 -->
    <template>
    <div>
        <div>A1</div>
        <div>A1</div>
     </div>
    </template>
    <!-- A2界面 -->
    <template>
    <div>
        <div>A2</div>
        <div>A2</div>
     </div>
    </template>
    
    

    注意：注释也算标签，例如以下属于多个根节点

    <template>
    <!-- 注释 -->
    <div>
        <div>A2</div>
         <div>A2</div>
    </div>
    </template>