在卡舌上滑动过渡(一个推动另一个)

Question

我正在尝试实现两个选项卡之间的幻灯片转换。一个标签应该来自左边，将另一个推到右边，另一个则相反。休假过渡进行得很顺利，但账单直接弹出，没有从应该的地方开始。。。我制作了一个CodePen来复制我尝试过的内容：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%);
}

有人知道我在这里错过了什么吗？

Answer 1

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

这个css类：

.slide-left-enter

变为：

.slide-left-enter-from

Answer 2

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