当前位置：首页 > VUE

vue 实现tab过渡切换

2026-01-23 02:26:29VUE

Vue 实现 Tab 过渡切换

在 Vue 中实现 Tab 过渡切换可以通过结合 <transition> 组件和动态组件或条件渲染来实现平滑的动画效果。以下是两种常见方法：

使用动态组件与过渡

通过 <component :is="currentTab"> 动态切换组件，并用 <transition> 包裹实现过渡动画：

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab" 
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab }}
      </button>
    </div>

    <transition name="fade" mode="out-in">
      <component :is="currentTabComponent" class="tab-content"></component>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Home', 'About', 'Contact'],
      currentTab: 'Home'
    };
  },
  computed: {
    currentTabComponent() {
      return this.currentTab.toLowerCase() + '-tab';
    }
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.tab-content {
  margin-top: 20px;
}
.active {
  font-weight: bold;
  color: #42b983;
}
</style>

使用条件渲染与过渡

通过 v-if 控制显示隐藏，结合 <transition> 实现过渡：

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

    <transition name="slide" mode="out-in">
      <div v-if="currentTab === 'home'" key="home" class="tab-content">
        Home Content
      </div>
      <div v-else-if="currentTab === 'about'" key="about" class="tab-content">
        About Content
      </div>
      <div v-else key="contact" class="tab-content">
        Contact Content
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'home', label: 'Home' },
        { name: 'about', label: 'About' },
        { name: 'contact', label: 'Contact' }
      ],
      currentTab: 'home'
    };
  }
};
</script>

<style>
.slide-enter-active {
  transition: all 0.3s ease-out;
}
.slide-leave-active {
  transition: all 0.3s ease-in;
}
.slide-enter-from {
  transform: translateX(20px);
  opacity: 0;
}
.slide-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}
</style>