选项卡上的滑动过渡（一个推另一个）答案

【问题标题】：Slide transition on tab (one pushing the other)选项卡上的滑动过渡（一个推另一个）
【发布时间】：2020-10-07 12:07:47
【问题描述】：

我正在尝试在两个选项卡之间实现幻灯片转换。一个选项卡应该来自左侧，将另一个选项卡推到右侧，另一个选项卡则相反。休假过渡进展顺利，但标签只是立即弹出，而没有从它应该开始的地方开始...... 我制作了一个 CodePen 来重现我尝试过的内容：Slide transition test on CodePen

这是 HTML，它只是一个包含 2 个按钮的 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>

为了进行转换，我确实有以下 css ：

.slide-left,
.slide-right{
  position: absolute;
}

.slide-right-enter-to,
.slide-right-leave {
  opacity: 1;
  transform: translateX(0);
}

.slide-right-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 500ms ease-in-out;
}

.slide-left-enter-to,
.slide-left-leave {
  opacity: 1;
  transform: translateX(0);
}

.slide-left-enter,
.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

有人知道我在这里缺少什么吗？

【问题讨论】：

标签： vue.js css-transitions vuejs-transition

【解决方案1】：

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

这个css类：

.slide-left-enter

变成：

.slide-left-enter-from

【讨论】：

【解决方案2】：

您可以使用转换的 npm 版本，而不是自己编写代码。它还将帮助您使用其 API、指南和示例，因此您不必担心这些。

【讨论】：

什么NPM版本什么过渡？
你能详细说明你在说什么吗？