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>关键点
mode="out-in"：确保当前元素离开动画完成后，新元素再进入。- 动态
key：通过key强制重新渲染，确保过渡效果触发。 - CSS 过渡类名：Vue 会自动为
<transition>添加类名（如fade-enter-active），通过 CSS 定义动画效果。 - 动态组件：结合
<component>可以灵活切换不同组件。
以上方法可以根据实际需求选择或组合使用。
