vue3实战tabs切换时添加动画效果

刚开始想通过给页面添加样式，来实现tabs跳转时过渡效果。但是我发现我好像不太会写。然后我知道有transition这个内置组件，来实现此效果。经过查看确实可以实现组件间的效果。

此处就不贴图了，代码也不多。大家仔细阅读即可。

<template>
  <div class="dashboard_container">
    <el-card v-if="role == 'admin'" class="tabs_wrap">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="工作台" name="dashList"></el-tab-pane>
        <el-tab-pane label="名单派发" name="townDashBoard"></el-tab-pane>
      </el-tabs>
    </el-card>
    <Transition name="fade" mode="out-in">
      <component :is="activeComponent"></component>
    </Transition>
  </div>
</template>

js部分，需要大家新建几个组件导入。然后解析一下把，首先导入两个组件。然后定义tabs当前选中name，然后点击tabs触发事件，给定义的变量赋值。然后定义选中tabs所显示的组件，监听name的变化，然后赋值给变量。即可实现。很简单哦 

<script setup lang="ts">
import townDashBoard from "./townDashBoard/index.vue";
import dashList from "./dashList/index.vue";
import { TabsPaneContext } from "element-plus";

const role = localStorage.getItem("role");
const activeName = ref("dashList");

const activeComponent = shallowRef(dashList);
watch(activeName, () => {
  activeName.value == "dashList"
    ? (activeComponent.value = dashList)
    : (activeComponent.value = townDashBoard);
});

const handleClick = (tab: TabsPaneContext) => {
  activeName.value = tab.props.name as string;
};
</script>

 过渡效果大家自行设置。

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.2s;
    opacity: 0;
    transform: translateX(30px);
  }