vue 实现tab过度动画

Vue 实现 Tab 过渡动画

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

使用 <transition> 组件

通过 <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" class="tab-content">
        {{ 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;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ddd;
}

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

使用 <transition-group> 组件

如果需要更复杂的动画效果，可以使用 <transition-group> 组件。

<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-group name="slide" tag="div" class="tab-container">
      <div 
        v-for="(tab, index) in tabs" 
        v-show="currentTab === index" 
        :key="index" 
        class="tab-content"
      >
        {{ tab.content }}
      </div>
    </transition-group>
  </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>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

.tab-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.tab-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  border: 1px solid #ddd;
}

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

使用动态组件

结合 Vue 的动态组件 <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="fade" mode="out-in">
      <component :is="currentTab"></component>
    </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>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

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

关键点

1. mode="out-in"：确保当前元素离开动画完成后，新元素再进入。
2. 动态 key：通过 key 强制重新渲染，确保过渡效果触发。
3. CSS 过渡类名：Vue 会自动为 <transition> 添加类名（如 fade-enter-active），通过 CSS 定义动画效果。
4. 动态组件：结合 <component> 可以灵活切换不同组件。

以上方法可以根据实际需求选择或组合使用。