如何实现 element-plus tabs切换动画效果

在 element-plus 中实现 tabs 切换动画效果需要使用 CSS 过渡效果。具体步骤如下：

1. 为每个 tab 面板添加一个唯一的 class 名称，例如：tab-pane-1、tab-pane-2 等。

2. 使用 CSS 选择器选择要应用切换动画效果的面板，例如：

.tab-transition-enter-active,
.tab-transition-leave-active {
transition: all 1s ease;
}

.tab-transition-enter,
.tab-transition-leave-to {
opacity: 0;
transform: translateX(30px);
}

3. 在组件中使用 <transition> 包裹 tab 面板：

<transition name="tab-transition">
<div class="tab-pane-1">第一个面板内容</div>
</transition>

4. 重复步骤 3，为每一个 tab 面板添加 <transition> 包裹，并添加唯一的 class 名称。

5. 在组件中使用 <el-tabs> 和 <el-tab-pane> 标签生成 tabs：

<el-tabs>
<el-tab-pane label="标签 1" name="tab-1">
<div class="tab-pane-1">第一个面板内容</div>
</el-tab-pane>
<el-tab-pane label="标签 2" name="tab-2">
<div class="tab-pane-2">第二个面板内容</div>
</el-tab-pane>
</el-tabs>

这样就可以在每一个 tab 面板切换时添加过渡动画效果了。