How can I allow a Vue component to manage its own transitions?

Question

By this I mean, when mounted, the enter animation is ran, and when removed, the leave animation is ran. I have a transition that needs to animate a number of elements within it on enter and leave, so I want to move all the code into its own component, then

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

---

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

Full example of my attempt: https://codesandbox.io/s/znq6l8p94p

As far as I am aware this is only half working because of the appear, i.e. it's just mere coincidence.

I feel like the only way I can solve this is by doing all the animation and state management in one component, as in a component that knows about the old and new sentences or use a transition-group, rather than just leaving Vue to manage that for me via my use of the key attribute. Am I perhaps misunderstanding how best to do transitions in Vue, should the animation all ways reside with the parent of a component?

After writing this out it feel like what I actually want is lifecycle hooks like transition-group offers, but which call the child components methods directly.

Thomas Nadin Thomas Nadin · Accepted Answer · 2018-09-03T13:39:21

My current understanding is that during v-on:leave the component is no longer reactive, and you should only be doing manual dom-manipulation...

Instead, my solution was to create a component that handled the adding and removing of the elements via a watch and then passed the array through to my component in props.

How can I allow a Vue component to manage its own transitions?

1 Answers