Slide transition on tab (one pushing the other)

Question

I'm trying to achieve a slide transition between two tabs. One tab is supposed to come from the left pushing the other one to the right and the opposite for the other one. The leave transition goes well but the tab just pop in straight away without starting where it is supposed to... I have made a CodePen to reproduce what I've tried : Slide transition test on CodePen

Here is the HTML, it is just a div containting 2 buttons that change the visibility of two div that represents my tabs content.

<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>

In order to do the transition I do have the following 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%);
}

Does anyone have an idea about what I'm missing here ?

Answer 1

I found the issue. I don't know why in the Vue transition documentation the css class added at enter is v-enter but the class applied in reality is v-enter-from...

this css class :

.slide-left-enter

becomes :

.slide-left-enter-from

Answer 2

Instead of coding it by yourself, you can use npm version of the transition. It will also help you with its API, Guides and Examples, so that you don't have to worry about those.