Как я могу позволить компоненту 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 компонент больше не реагирует, и вы должны выполнять только ручные манипуляции с домом ...

Вместо этого я решил создать компонент, который обрабатывал добавление и удаление элементов через watch, а затем передавал массив моему компоненту в props.