Vue.js 选项卡上的滑动过渡（一个推另一个）

我试图在两个选项卡之间实现幻灯片切换。一个标签应该从左边来，将另一个推到右边，另一个则相反。 离开过渡进行得很顺利，但是标签只是直接弹出，没有开始它应该在哪里。。。 我制作了一个代码笔来复制我尝试过的内容：

这是HTML，它只是一个包含两个按钮的div，用于更改表示我的选项卡内容的两个div的可见性

<div id="transition-test" class="demo">
  <div class="tabs">
    <button v-for="tab in tabs" class="tab" :key="tab.id" @click="selectedTab = tab.id"> {{tab.text}}</button>
    <transition name="slide-right">
      <div v-show="1 === selectedTab" class="tab1" key="tab1"></div>
    </transition>
    <transition name="slide-left">
      <div v-show="2 === selectedTab" class="tab2" key="tab2"></div>
    </transition>
  </div>
</div>

---

有人知道我遗漏了什么吗？

我发现了问题所在。我不知道为什么在Vue转换文档中，在enter处添加的css类是v-enter，但实际应用的类是v-enter-from

此css类：

.slide-left-enter

变成：

.slide-left-enter-from

---

您可以使用npm版本的转换，而不是自己编写。它还将帮助您学习API、指南和示例，这样您就不必担心这些问题。

什么转换的NPM版本？您能提供更多关于您所谈论内容的详细信息吗？

.slide-left-enter-from