同一组件之间的过渡？

Question

// Template
<transition name="fade">
    <my-component :my-prop="data[currentIndex]" />
</transition>

// CSS
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

我还有一个按钮来更改当前索引和更新组件的数据。 这不起作用，我认为这是因为更改数据不会使其成为触发转换所需的新组件。

我在网上看到的所有示例都是用于在不同组件之间切换，这项工作但我无法应用它，因为它都是针对同一个组件的。

我发现的另一个解决方案是在 v-for 中创建一堆组件，然后在当前组件上显示一个 v-show，但是我需要绝对定位来防止过渡跳跃，这看起来不像方法来做到这一点。

我想我可以在更新函数的脚本标记或其他东西中进行转换，但是当转换应该为我处理这个时，这似乎是错误的方式。我是不是错过了什么。

Answer 1

昨天遇到了同样的问题！ ^^" 当我向我的组件添加 :key="" 属性时它工作正常（即使子组件中没有名为 key 的道具）。 试试这个：

<transition name="slide">
    <my-component :key="currentIndex" :my-prop="data[currentIndex]" />
</transition>

我还不知道为什么，但我猜如果道具是一个对象，它不会检测到变化？或者也许你必须传递一个关键属性（但我看到一些不使用关键属性的例子......） 告诉我它是否有效；）

编辑：我看到您更改了过渡的名称，并且样式不包含此名称。使用默认名称和样式（“fade”）https://vuejs.org/v2/guide/transitions.html

尝试上述解决方案