一个基于Vue.js的tab切换组件，切换效果为左右移动，带有过渡效果

​
<template>
  <div class="tab-container">
    <div class="tab-header">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        {{ tab }}
      </div>
    </div>
    <div class="tab-content">
      <transition name="slide">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          v-if="activeTab === index"
          class="tab-pane"
        >
          {{ tabContent[activeTab] }}
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
      tabContent: [
        'This is the content of Tab 1',
        'This is the content of Tab 2',
        'This is the content of Tab 3'
      ]
    };
  }
};
</script>

<style>
.tab-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
  padding: 10px;
}

.tab-header div {
  cursor: pointer;
  padding: 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.tab-header div:hover {
  background-color: #e0e0e0;
}

.tab-header .active {
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

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

.tab-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>

​

        在这个组件中，我们使用了Vue.js的transition组件来实现过渡效果，同时使用了CSS3的`transform`属性来实现左右移动的效果。在CSS中，我们使用了`.slide-enter-active`和`.slide-leave-active`来定义过渡的动画效果，使用`.slide-enter`和`.slide-leave-to`来定义进入和离开的状态。在Vue.js中，我们使用`v-if`来控制当前显示的tab内容，使用`@click`来监听tab头部的点击事件，从而切换tab。