VueJS transition slider

Question

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

score 4 · Accepted Answer · answered Mar 18 '19 at 14:01

4

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

answered Mar 18 '19 at 14:01

Thomas

2,431
17
22

1

Thank you that was a very straight forward answer I was thinking it must be something easy like that but just didn't get to the solution – Chris Mar 19 '19 at 11:52

VueJS transition slider

1 Answers1