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
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++
})
},
}