VueJS 过渡滑块

Question

我有一个包含三个步骤的表格。单击 prey/next，每一步都应从一侧过渡到另一侧。问题是，在方向改变后没有正确应用转换。有谁知道为什么 vue 在方向改变后没有向显示的元素添加正确的 class ？一直在苦思冥想怎么找不到解决办法

这是一支笔：
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>

并且转换的名称会根据单击两个按钮 'prev' 或 'next' 中的哪一个而更改。我的印象是，这将更改所有转换的转换名称。但不知何故这个名字落后了一步。

感谢您的帮助

克里斯

Answer 1

必须在使用之前应用转换。

您可以通过等待下一个 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

VueJS 过渡滑块

VueJS transition slider

transition

vue.js

vuejs-transition