Element中el-tabs左右滑动动画的实现

<template>
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane label="cpu" name="cpu">
      <cpu :class="tabContentClass"></cpu>
    </el-tab-pane>
    <el-tab-pane label="内存子系统" name="内存子系统">
      <nczxt :class="tabContentClass"></nczxt>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'cpu',
      previousIndex: 0, // 上一个激活 tab 的索引
      currentIndex: 0 // 当前激活 tab 的索引
    };
  },
  methods: {
    handleTabClick(tab) {
      this.previousIndex = Number(this.currentIndex);
      this.currentIndex = Number(tab.index);
      this.$nextTick(() => {
        this.previousIndex = Number(this.currentIndex);
      });
    }
  },
  computed: {
    // 根据方向设置动画样式
    tabContentClass() {
      return {
        'slide-enter-active': true,
        'slide-leave-active': this.currentIndex > this.previousIndex,
        'slide-enter': this.currentIndex < this.previousIndex,
        'slide-leave-to': this.currentIndex > this.previousIndex
      };
    }
  }
};
</script>

.slide-enter-active, .slide-leave-active {
  transition: all 0.5s;
}
.slide-enter {
  transform: translateX(100%);
  opacity: 0;
}
.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}