Блог

Я пытаюсь добиться перехода слайдов между двумя вкладками. Предполагается, что одна вкладка находится слева, а другая — справа, а другая — наоборот. Переход «Оставить» проходит хорошо, но вкладка просто появляется сразу, не начиная с того места, где она должна быть… Я создал CodePen, чтобы воспроизвести то, что я пробовал: тест перехода слайдов на CodePen

Вот HTML, это просто div, содержащий 2 кнопки, которые изменяют видимость двух 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 класс css, добавленный при вводе, — v-enter, но класс, применяемый в действительности, — v-enter-from …

этот класс css :

 .slide-left-enter
  

становится :

 .slide-left-enter-from
  

Вместо того, чтобы кодировать его самостоятельно, вы можете использовать npm-версию перехода. Это также поможет вам с его API, руководствами и примерами, так что вам не нужно беспокоиться об этом.