Блог

У меня есть форма с тремя шагами. И каждый шаг должен переходить из стороны в сторону при нажатии кнопки prey / next. Проблема в том, что переходы не применяются правильно после изменения направления. Кто-нибудь знает, почему 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>
  

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

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

Крис

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

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

   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