CODEWITHSUNDEEP
vue.jstransitionvuejs-transition
Chris
Chris

Reputation: 419

VueJS transition slider

I have a form with three steps. And each step should transition from side to side on click of prey/next. The problem is, that the transitions aren't being applied correctly after a direction change. Does anyone know why vue isn't adding the correct class to the displayed element after the change in direction? I have been racking my head as to why can't find a solution.

here's a pen:
https://codepen.io/cjfradley/pen/YgvJxe

the transition blocks look like this:

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

and the name of the transition is changed depending on which of the two buttons 'prev' or 'next' is clicked. I was under the impression, that that would change the transition name for all transitions. But somehow the name lags behind one step.

Thanx for you your help

Chris

Upvotes: 2

Views: 391

Answers (1)

Thomas
Thomas

Reputation: 2536

The transition musst be applied before using it.

You could do that by waiting for the next Tick.

  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

Upvotes: 4

Related Questions