elementui 标签页切换过渡动画

elementui标签页切换过渡动画可以使用Vue的transition组件来实现。具体步骤如下：
1. 在el-tabs标签中添加name属性，用于指定transition组件的name值。
2. 在el-tabs标签中添加v-model属性，用于绑定当前选中的标签页。
3. 在el-tabs标签中添加@tab-click事件，用于在标签页切换时触发动画效果。
4. 在el-tabs-pane标签中添加name属性，用于指定当前标签页的name值。
5. 在el-tabs-pane标签中添加v-if属性，用于控制当前标签页的显示与隐藏。
6. 在el-tabs-pane标签中添加transition组件，用于实现过渡动画效果。

以下是一个示例代码：

<template>
  <el-tabs v-model="activeName" name="tab-demo" @tab-click="handleTabClick">
    <el-tab-pane label="标签页1" name="tab1">
      <transition name="tab-fade">
        <div v-if="activeName === 'tab1'">
          <!-- 标签页1的内容 -->
        </div>
      </transition>
    </el-tab-pane>
    <el-tab-pane label="标签页2" name="tab2">
      <transition name="tab-fade">
        <div v-if="activeName === 'tab2'">
          <!-- 标签页2的内容 -->
        </div>
      </transition>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'tab1'
    }
  },
  methods: {
    handleTabClick(tab) {
      // 标签页切换时触发
    }
  }
}
</script>

<style>
.tab-fade-enter-active,
.tab-fade-leave-active {
  transition: opacity 0.5s;
}
.tab-fade-enter,
.tab-fade-leave-to {
  opacity: 0;
}
</style>

在上面的代码中，我们使用了Vue的transition组件来实现标签页切换的过渡动画效果。其中，我们通过给el-tabs标签添加name属性来指定transition组件的name值，通过给el-tabs-pane标签添加name属性来指定当前标签页的name值，通过给el-tabs-pane标签添加v-if属性来控制当前标签页的显示与隐藏。同时，我们还通过在style标签中添加CSS样式来定义了过渡动画的效果。