VueJS过渡滑块

Question

我有一个包含三个步骤的表格。 并且，每按一下猎物，下一步就要从一侧移到另一侧。 问题在于，方向改变后，转换没有正确应用。 有谁知道为什么vue在方向改变后没有向显示的元素添加正确的类？ 关于为什么找不到解决方法，我一直rack不休。

这是一支笔：
https://codepen.io/cjfradley/pen/YgvJxe

过渡块如下所示：

Build Phases

，根据单击两个按钮“上一个”或“下一个”中的哪个按钮来更改转换的名称。 我的印象是，这将更改所有转换的转换名称。但是在某种程度上，这个名称落后一步。

感谢您的帮助

克里斯

Answer 1

在使用过渡效果之前先应用它。

您可以通过等待下一个滴答声来做到这一点。

  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