同一组件之间的过渡？

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

同一组件之间的过渡？

Transition between the same component?

transition

vue.js

vue-dynamic-components