如何允许 Vue 组件管理自己的转换？

Question

我的意思是，安装时会运行进入动画，移除时会运行离开动画。我有一个过渡，需要在进入和离开时为其中的许多元素设置动画，所以我想将所有代码移动到它自己的组件中，然后

<template>
    <transition @enter="enter" @leave="leave">
        <!-- component -->
    </transition>
</template>

---

<CustomComponent :key="indentifer" :indentifer="indentifer" />

我尝试的完整示例：https://codesandbox.io/s/znq6l8p94p

据我所知，由于appear，这只是工作的一半，也就是说，这只是巧合。

我觉得我可以解决这个问题的唯一方法是在一个组件中完成所有动画和状态管理，例如在一个知道新旧句子或使用 transition-group 的组件中，而不是仅仅离开 Vue通过我使用key 属性为我管理它。我是否可能误解了在 Vue 中如何最好地进行转换，动画是否应该以所有方式驻留在组件的父级中？

写完之后，感觉我真正想要的是像transition-group 提供的生命周期钩子，但它直接调用子组件方法。

Answer 1

我目前的理解是，在 v-on:leave 期间，组件不再是反应式的，您应该只进行手动 dom 操作...

相反，我的解决方案是创建一个组件，通过watch 处理元素的添加和删除，然后将数组传递给props 中的组件。