Vue: Trigger Transitions Programmatically

[chrishurlburt]

What problem does this feature solve?

Currently, transitions trigger based on 4 criteria (v-if, v-show, dynamic components, root nodes). However, there are situations where you may want to use a transition beyond these 4 triggers.

For example, when a component is created there could be several elements where the desired effect is for them to transition in sequence. Maybe a div expands and copy fades in once the expand completes. This can be accomplished nicely with Vue's transitions hooks to control the sequence of transitions. However, since the initial transition relies on one of the 4 aforementioned methods, there is no way to accomplish this effect without the content on the page jumping due to the div suddenly entering the document flow via v-if or v-show.

Being able to trigger the transition programmatically would allow you to hide the div through other means that do not remove it from the document flow (e.g. visibility: hidden) and then trigger the transition at an arbitrary time after the component is created.

here is a basic example => https://jsfiddle.net/3v0j0u7m/7/

This would be especially useful after a page transition. For example, a page transitions, page component mounts, content within the page component transitions separately and in sequence.

What does the proposed API look like?

<transition name="fade" :run="true"> // setting run to true would trigger the transition
     <p>Some el</p>
</transition>

[yyx990803]

Use a key on the inner element: https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements

[enomado]

I've tried dynamic :key="run_trigger"
it emits both leave and enter.

Is it idiomatically OK and I should just mock some of events, or you meant something else ?

[SteffenDE]

This is not a good solution for this problem, as changing the key triggers a complete re-render of the component, even if nothing changed.
@yyx990803 is there another way of triggering transitions?

[salomoneb]

@yyx990803 -

Seconding @SteffenDE 's question.

Say I have the following template:

<custom-reusable-transition>
    <form>
        <component-a />
        <component-b />
    </form>
</custom-reusable-transition>

I want the form to transition when propertyX in my Vuex state changes. I'll add a computed property to retrieve this - getPropertyX.

If I use my computed property as a key on the form, like:

<custom-reusable-transition>
    <form :key="getPropertyX">
        ...
    </form>
</custom-reusable-transition>

When propertyX changes, my form will transition like I want, but all of the data in components A and B will be reset when those elements are destroyed and re-rendered.

Is there a way to trigger a transition on the form without destroying the data in the child components?

Is it possible to do without moving the data to the Vuex state?

[ayZagen]

@salomoneb have you tried keep-alive ?

[salomoneb]

@ayZagen I have. Since the form isn't bound to the state data in this example (it's just a wrapper for the reactive elements inside), placing <keep-alive> around it doesn't work.

<keep-alive> also doesn't work on the internal components because the form is what's being created and destroyed. When that happens, its children are also remounted.

[katerlouis]

Use a key on the inner element: https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements

OMG VUE IS SO AWESOME!
Seriously, this alone will turn the hardest React lover to the green side of the force 8)

[milesingrams]

I'm trying to write a v-show equivalent that instead of manipulating the "display" property will manipulate the "visibility" property. This is easy to do without transitions but I also want the toggling to trigger the enter and leave transitions. As far as I know this is not possible without programmatic access to trigger transitions. If I change the key it will trigger both "leave" and "enter" transitions back to back. Any suggestions?