Слайдер перехода VueJS

Question

У меня есть форма с тремя шагами. И каждый шаг должен переходить из стороны в сторону по щелчку добычи / следующего. Проблема в том, что переходы не применяются правильно после изменения направления. Кто-нибудь знает, почему vue не добавляет правильный класс к отображаемому элементу после изменения направления? Я ломал голову над тем, почему не могу найти решение.

вот ручка:
https://codepen.io/cjfradley/pen/YgvJxe

переходные блоки выглядят так:

<transition :name="transition">
  <div class="register__form-step" v-if="step === 1">
    Step 1
    <br>
    <button @click.prevent="next()">Vorwärts</button>
  </div>
</transition>

и имя перехода изменяется в зависимости от того, какая из двух кнопок "предыдущая" или "следующая" нажата. У меня сложилось впечатление, что это изменит имя перехода для всех переходов. Но как-то название отстает на один шаг.

Спасибо за вашу помощь

Крис

Answer 1

Переход должен быть применен перед использованием.

Вы можете сделать это, ожидая следующего тика.

  methods: {
    prev () {
      this.transition = "slide-prev"
      Vue.nextTick(_ => {
         this.step--  
      })
    },
    next () {
      this.transition = "slide-next"
      Vue.nextTick(_ => {
        this.step++
      })
    },
  }

https://codepen.io/anon/pen/WmyYpx