javascript - 如何给 el-tabs 添加切换页面的过渡动效？

Question

如何给 el-tabs 添加切换页面的过渡动效

当我用下面的代码切换页面时，离开的过渡动效不生效

相关代码：

<template>  <div>    <el-tabs v-model="activeName" @tab-click="handleClick">        <transition-group name="scale">          <el-tab-pane label="工作台" name="dashList" key="dashList"><div v-show="activeName === 'dashList'">11</div></el-tab-pane>          <el-tab-pane label="名单派发" name="townDashBoard" key="townDashBoard"><div v-show="activeName === 'townDashBoard'">22</div></el-tab-pane>          <el-tab-pane label="名单派发2" name="townDashBoard2" key="townDashBoard2"><div v-show="activeName === 'townDashBoard2'">33</div></el-tab-pane>        </transition-group>    </el-tabs>  </div></template><script setup>import {ref} from "vue";const activeName = ref("dashList");const handleClick = (tab) => {  activeName.value = tab.props.name;};</script><style lang="scss">.scale-enter-active,.scale-leave-active {  transition: all 0.5s ease;}.scale-enter-from {  opacity: 0;  transform: scale(1.01);}.scale-leave-to {  opacity: 0;  transform: scale(0.99);}</style>

我该怎么做才可以完美的给 el-tabs 添加切换页面的过渡动效

Answer 1

用 <transition> 而不是 <transition-group>，用 v-if 而不是 v-show，才会触发动画

<template>  <div>    <el-tabs v-model="activeName" @tab-click="handleClick">      <transition name="scale" mode="out-in">        <el-tab-pane label="工作台" name="dashList" v-if="activeName === 'dashList'">11</el-tab-pane>        <el-tab-pane label="名单派发" name="townDashBoard" v-if="activeName === 'townDashBoard'">22</el-tab-pane>        <el-tab-pane label="名单派发2" name="townDashBoard2" v-if="activeName === 'townDashBoard2'">33</el-tab-pane>      </transition>    </el-tabs>  </div></template><script setup>import {ref} from "vue";const activeName = ref("dashList");const handleClick = (tab) => {  activeName.value = tab.props.name;};</script><style lang="scss">.scale-enter-active,.scale-leave-active {  transition: all 0.5s ease;}.scale-enter-from {  opacity: 0;  transform: scale(1.01);}.scale-leave-to {  opacity: 0;  transform: scale(0.99);}</style>