-
-
Notifications
You must be signed in to change notification settings - Fork 33.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Trigger Transitions Programmatically #5425
Comments
Use a |
I've tried dynamic Is it idiomatically OK and I should just mock some of events, or you meant something else ? |
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. |
Seconding @SteffenDE 's question. Say I have the following template:
I want the form to transition when If I use my computed property as a key on the form, like:
When 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? |
@salomoneb have you tried |
@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
|
OMG VUE IS SO AWESOME! |
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? |
@milesingrams were you able to figure it out? I'd also like to create a |
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?
The text was updated successfully, but these errors were encountered: