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

作者站长头像
站长
· 阅读数 6

如何给 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 添加切换页面的过渡动效

回复
1个回答
avatar
test
2024-06-29

用 <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>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容