Слайдер перехода VueJS - PullRequest
       22

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

1 голос
/ 18 марта 2019

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

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

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

Крис

1 Ответ

2 голосов
/ 18 марта 2019

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

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

  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

...