Vue3自定义组件动态切换过渡失效问题求助

问题根源分析 #

• 自定义组件为多根节点：Vue的<transition>要求作用于单根元素，多根组件无法正确触发过渡逻辑
• 动态组件绑定值类型不一致：初始component赋值为组件对象（MainHomeComponent），但按钮点击时赋值为字符串（'MainHomeComponent'），导致组件切换时匹配异常
• 添加mode="out-in"后页面空白：多根组件导致过渡逻辑紊乱，旧组件未正确卸载，新组件无法正常挂载

修复步骤 #

1. 给自定义组件添加单根容器 #

修改所有自定义组件（如MetricMainComponent.vue），将多根节点包裹在一个父容器内：

<template>
  <div class="metric-main-wrapper">
    <div class="top-bar" style="height: 100px;">
      <div class="welcome-message">
        <header class="header">
          <h5 class="title-text" style="font-size: 35px;">Métricos</h5>
          <p class="subtitle-text" style="font-size: 25px;">Actualiza los métricos de las diferentes categorias.</p>
        </header>
      </div>
    </div>
    <div class="container-fluid" id="metrics-page-wrapper">
      
    </div>
  </div>
</template>

<style src="../css/MetricMainComponent.css"></style>

2. 统一动态组件的绑定值类型 #

确保按钮点击时赋值为组件对象，和初始值保持一致：

<!-- 将字符串改为组件对象 -->
<button type="button" class="btn btn-outline-primary" id="menu-buttons"
  @click="component = MainHomeComponent">
  <i class="fa-solid fa-house" id="home-icon"></i><br />Inicio
</button>
<br /><br />
<button type="button" class="btn btn-outline-primary" id="menu-buttons"
  @click="component = MetricMainComponent">
  <i class="fa-solid fa-table-cells" id="metrics-icon"></i><br />Metricos
</button>

3. 优化<transition>的使用 #

直接将<transition>包裹<component>，同时添加key属性强制组件重新渲染，确保过渡触发：

<div class="col-10" style="padding: 0">
  <transition name="fade" mode="out-in">
    <component :is="component" :key="component.name"></component>
  </transition>
</div>

4. 验证过渡样式 #

当前过渡样式无问题，可保留：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

额外提示 #

不要将<link>标签放在组件的<template>中，应统一放在项目的public/index.html里，避免重复加载和渲染异常。

内容的提问来源于stack exchange，提问作者Miguel Camacho