2

我有一个包含三个步骤的表格。并且每一步都应该在点击猎物/下一步时从一侧过渡到另一侧。问题是，在方向改变后没有正确应用过渡。有谁知道为什么 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>

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

谢谢你的帮助

克里斯

4

1 回答 1

3

必须在使用之前应用过渡。

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

于 2019-03-18T14:01:25.310 回答