包裹el-tab-pane

### Vue3 中 `el-tab-pane` 包裹时 `transition` 动画无效的解决方案 #### 1. **原因分析** 在 Vue3 中，当使用 Element Plus 的 `<el-tabs>` 和 `<el-tab-pane>` 组件时，默认情况下它们不会自动应用过渡动画。这是因为： - `<el-tabs>` 默认会销毁未激活的 `<el-tab-pane>`，这意味着未选中的标签页会被卸载，从而导致无法触发 `transition` 动画[^1]。 - 如果希望保留未激活的标签页以便执行动画，则需要手动配置相关选项并结合 Vue3 的 `<transition>` 或 `<transition-group>` 组件。 此外，还需要注意 Vue3 的类名变更问题（如前所述）。如果 CSS 类名不符合 Vue3 的新标准，也会造成动画失效。 --- #### 2. **解决方法** ##### 方法一：启用 `preserve-rendered` 属性 Element Plus 提供了一个名为 `preserve-rendered` 的属性，它可以防止未激活的 `<el-tab-pane>` 被销毁。这样即使当前标签页未被选中，其 DOM 结构仍然存在于文档流中，从而允许过渡动画正常运行。 ```html <el-tabs v-model="activeTab" type="card" preserve-rendered> <el-tab-pane label="首页" name="home"> <transition name="fade"> <Home /> </transition> </el-tab-pane> <el-tab-pane label="关于" name="about"> <transition name="fade"> <About /> </transition> </el-tab-pane> </el-tabs> ``` 在此基础上，定义相应的 CSS 动画即可： ```css .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter-from, .fade-leave-to { opacity: 0; } ``` --- ##### 方法二：结合 `<keep-alive>` 缓存组件 对于性能敏感的应用程序，可以考虑使用 Vue3 的 `<keep-alive>` 来缓存已经加载过的组件实例。这种方式不仅可以减少重复渲染带来的开销，还能确保动画的一致性。 ```html <el-tabs v-model="activeTab" type="card"> <keep-alive> <component :is="'tab-' + activeTab"></component> </keep-alive> </el-tabs> <script setup lang="ts"> import Home from './components/Home.vue'; import About from './components/About.vue'; const components = { 'tab-home': Home, 'tab-about': About, }; const activeTab = ref('home'); </script> ``` 需要注意的是，`<keep-alive>` 只能缓存单层子组件，因此如果有更深层次的嵌套结构，可能需要额外处理。 --- ##### 方法三：自定义 Tab 切换逻辑 如果内置功能仍不足以满足需求，还可以完全接管 Tab 切换过程，并通过编程方式实现所需的动画效果。例如： ```html <div class="tabs-container"> <button v-for="(tab, index) in tabs" :key="index" @click="switchTab(index)"> {{ tab.label }} </button> <transition name="slide-fade"> <component :is="currentComponent" v-if="showContent"></component> </transition> </div> <script setup lang="ts"> import FirstTab from './FirstTab.vue'; import SecondTab from './SecondTab.vue'; const tabs = [ { label: '第一个', component: FirstTab }, { label: '第二个', component: SecondTab }, ]; let currentIndex = ref(0); let showContent = ref(true); const currentComponent = computed(() => tabs[currentIndex.value].component); function switchTab(index: number): void { showContent.value = false; setTimeout(() => { currentIndex.value = index; showContent.value = true; }, 300); // 配合 slide-fade 动画时间 } </script> <style> .slide-fade-enter-active { transition: all 0.3s ease-out; } .slide-fade-leave-active { transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter-from, .slide-fade-leave-to { transform: translateX(20px); opacity: 0; } </style> ``` 此方法提供了最大的灵活性，但也增加了复杂度。 --- #### 总结 针对 Vue3 中 `el-tab-pane` 包裹时 `transition` 动画无效的问题，推荐按照以下顺序尝试解决方案： 1. 启用 `preserve-rendered` 属性； 2. 使用 `<keep-alive>` 缓存组件； 3. 自定义 Tab 切换逻辑以获得更高的可控性和扩展性。 每种方案都有各自的适用场景，请根据实际业务需求选择最合适的策略。 --- ###