Vuetify: Dialog transition when navigating away

[maartendraijer]

When navigating to a specific route I want to show a dialog with a transition. This works fine when setting the dialog's v-model to true when the component is mount()ed. But, I also want to show the transition when navigating away from this route. How would I do this? Can I somehow programmatically close the dialog and $router.push afterwards? Or is there a better way?

Fiddle: http://jsfiddle.net/h4kpvk4v/11/

[johnleider]

You could use the beforeRouteLeave hook in your component.

[maartendraijer]

@johnleider Ah, great. Thanks. But.. how to "wait" until the v-dialog has been closed? I can of course set a timeout, but that feels a little ugly. Also when the transition duration of the dialog changes this won't work anymore.

[johnleider]

You could bind an event to 'transitionend' on the dialog.

[forresthopkinsa]

Trying to bind to the transitionend event on the v-dialog and it's not working. I can provide more details if needed, but I wanted to know if you had any immediate thoughts on it?