0

我正在尝试在两个选项卡之间实现幻灯片过渡。一个选项卡应该来自左侧，将另一个选项卡推到右侧，另一个选项卡则相反。离开过渡进展顺利，但选项卡只是立即弹出而没有从它应该开始的位置开始......我制作了一个 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%);
}

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

4

2 回答 2

0

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

这个CSS类：

.slide-left-enter

变成：

.slide-left-enter-from
于 2020-10-08T13:12:55.480 回答
-3

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

于 2020-11-26T11:14:46.740 回答