vue 使用transition实现tab切换动态滑动效果

使用Vue的transition组件，可以非常方便地实现tab切换动态滑动效果。具体步骤如下：

1、在模板中定义一个包含tab按钮和tab内容的容器组件，例如：

html 复制代码

<div class="tab-container">
  <div class="tab-buttons">
    <button @click="activeTabIndex = 0">Tab 1</button>
    <button @click="activeTabIndex = 1">Tab 2</button>
    <button @click="activeTabIndex = 2">Tab 3</button>
  </div>
  <transition name="slide">
    <div class="tab-contents" :key="activeTabIndex">
      <div v-show="activeTabIndex === 0">Tab 1 content</div>
      <div v-show="activeTabIndex === 1">Tab 2 content</div>
      <div v-show="activeTabIndex === 2">Tab 3 content</div>
    </div>
  </transition>
</div>

2、在样式表中定义一个名为"slide"的过渡动画效果，例如：

css 复制代码

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

.slide-enter {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}

3、在Vue实例中定义一个变量activeTabIndex，用于控制当前激活的tab按钮和tab内容，例如：

javascript 复制代码

export default {
  data() {
    return {
      activeTabIndex: 0,
    };
  },
  ...
};

这样就可以实现一个带有动态滑动效果的tab切换功能了。当点击tab按钮时，使用Vue的transition组件会自动播放"slide"动画效果，让tab内容在平移的过程中切换。