当前位置：首页 > VUE

vue 实现tab过度动画

2026-01-21 10:21:46VUE

Vue 实现 Tab 过渡动画

在 Vue 中实现 Tab 过渡动画可以通过 <transition> 或 <transition-group> 组件结合 CSS 过渡或动画实现。以下是具体实现方法：

使用 `<transition>` 组件

通过 Vue 内置的 <transition> 组件包裹 Tab 内容，配合 CSS 过渡类名实现动画效果。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index" 
        @click="currentTab = index"
        :class="{ active: currentTab === index }"
      >
        {{ tab.name }}
      </button>
    </div>

    <transition name="fade" mode="out-in">
      <div :key="currentTab">
        {{ tabs[currentTab].content }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: [
        { name: 'Tab 1', content: 'Content for Tab 1' },
        { name: 'Tab 2', content: 'Content for Tab 2' },
        { name: 'Tab 3', content: 'Content for Tab 3' }
      ]
    };
  }
};
</script>

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

.tabs button.active {
  background-color: #42b983;
  color: white;
}
</style>

使用动态组件

通过动态组件 <component> 结合 <transition> 实现更灵活的 Tab 切换动画。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index" 
        @click="currentTab = tab.component"
        :class="{ active: currentTab === tab.component }"
      >
        {{ tab.name }}
      </button>
    </div>

    <transition name="slide" mode="out-in">
      <component :is="currentTab" />
    </transition>
  </div>
</template>

<script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';
import Tab3 from './Tab3.vue';

export default {
  components: { Tab1, Tab2, Tab3 },
  data() {
    return {
      currentTab: 'Tab1',
      tabs: [
        { name: 'Tab 1', component: 'Tab1' },
        { name: 'Tab 2', component: 'Tab2' },
        { name: 'Tab 3', component: 'Tab3' }
      ]
    };
  }
};
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

使用 CSS 动画

除了过渡效果，还可以使用 CSS 动画实现更复杂的 Tab 切换效果。

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

结合路由实现 Tab 动画

如果 Tab 切换与路由关联，可以在路由视图 <router-view> 上应用过渡动画。

<template>
  <div>
    <router-link 
      v-for="(tab, index) in tabs" 
      :key="index" 
      :to="tab.path"
      active-class="active"
    >
      {{ tab.name }}
    </router-link>

    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>