vue动画实现标签页

使用 Vue 实现标签页动画

基础结构

通过 Vue 的 <transition> 或 <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 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.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.tabs button {
  padding: 8px 16px;
  margin-right: 4px;
  background: #eee;
  border: none;
  cursor: pointer;
}
.tabs button.active {
  background: #ddd;
  font-weight: bold;
}
.tab-content {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #ddd;
}
</style>

滑动动画

实现水平滑动效果：

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

修改模板中的过渡名：

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

动态组件实现

使用 <component> 结合动态组件实现更复杂的标签页内容：

<template>
  <transition name="fade" mode="out-in">
    <component :is="tabs[currentTab].component" />
  </transition>
</template>

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

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

进阶技巧

1. 路由集成：结合 Vue Router 实现路由标签页
2. 状态管理：使用 Vuex 管理标签页状态
3. 响应式设计：添加媒体查询适应移动设备
4. 性能优化：对不活跃标签页使用 keep-alive

<transition name="fade" mode="out-in">
  <keep-alive>
    <component :is="tabs[currentTab].component" />
  </keep-alive>
</transition>

这些方法可以根据项目需求灵活组合使用，实现各种标签页动画效果。