實現基于 Element UI el-tabs 的左右滑動動畫

引言

在構建現代 web 應用時，為用戶提供平滑的動畫效果是提升用戶體驗的關鍵。本篇博客將詳細介紹如何在使用 Vue 以及 Element UI 時，實現一個具有左右滑動效果的 tab 切換動畫。

使用 el-tabs 創建 tab 組件

首先，我們需要創建一個基礎的 el-tabs 組件，用于展示不同的內容區域。

<template><el-tabs v-model="activeName" @tab-click="handleTabClick"><el-tab-pane label="cpu" name="cpu"><cpu :class="tabContentClass"></cpu></el-tab-pane><el-tab-pane label="內存子系統" name="內存子系統"><nczxt :class="tabContentClass"></nczxt></el-tab-pane></el-tabs>
</template>

跟蹤當前和上一次激活的 tab

我們希望了解用戶是向左滑動還是向右滑動，為此需要知道當前和之前激活的 tab 的索引。

<script>
export default {data() {return {activeName: 'cpu',previousIndex: 0, // 上一個激活 tab 的索引currentIndex: 0 // 當前激活 tab 的索引};},methods: {handleTabClick(tab) {this.previousIndex = Number(this.currentIndex);this.currentIndex = Number(tab.index);this.$nextTick(() => {this.previousIndex = Number(this.currentIndex);});}},computed: {// 根據方向設置動畫樣式tabContentClass() {return {'slide-enter-active': true,'slide-leave-active': this.currentIndex > this.previousIndex,'slide-enter': this.currentIndex < this.previousIndex,'slide-leave-to': this.currentIndex > this.previousIndex};}}
};
</script>

動畫樣式

通過 CSS 我們定義了滑動進入以及滑動離開時的動畫效果。

.slide-enter-active, .slide-leave-active {transition: all 0.5s;
}
.slide-enter {transform: translateX(100%);opacity: 0;
}
.slide-leave-to {transform: translateX(-100%);opacity: 0;
}

.slide-enter-active 和 .slide-leave-active 類負責定義動畫的持續時間。
.slide-enter 類定義了新內容滑入的起始狀態。
.slide-leave-to 類定義了舊內容滑出的終止狀態。

結語

這樣，我們就利用 Vue 的 computed 計算屬性以及 CSS 過渡效果實現了一個簡單而流暢的左右滑動動畫效果，以增強 el-tabs 組件的交互體驗。注意，這個效果只是一個基礎的左右滑動動畫，可以根據實際需要進行調整和增強。