Vuepress: Route/Page Transition

[pxwee5]

Feature request

Is it in the roadmap to add page transitions to VuePress?

What problem does this feature solve?

Beautify the transition between pages

[kefranabg]

What kind of transition are you thinking about?

[gevera]

Fade in and out

[vue-bot]

Hello!
This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues requiring feedback after 20 days of inactivity. It’s been at least 10 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. (A maintainer can also add the label not stale to keep this issue open.)

Thanks for being a part of the Vue community! 💪💚️

[CodesOfRa]

I can work on this :)

[sdaitzman]

@CodesOfRa are you still planning to work on this? I'm considering writing a plugin from scratch, but don't want to duplicate your work, especially if there's any work I could do to help.

The simplest implementation I've come up with so far would just involve adding a Vue component as a parent of the GlobalLayout, which (if I understand correctly) should handle timing and expose the right CSS classes using the default Vue transition system.

[sdaitzman]

A much-refined proof-of-concept version of the idea I describe, written by @jdtzmn as a patch rather than a plugin, is here: https://github.com/jdtzmn/vuepress

This implementation would also meet #2098, I think (@Axieum confirm?). It allows for any custom root combination of Vue components to replace the default router setup.

Tomorrow, I'll try to get an example live. If this is a useful feature, I can document/test/refactor @jdtzmn's code as needed.

[Axieum]

Yes, this appears to solve #2098, however will need modifying to remove a couple set in stone elements; see comment on commit jdtzmn/vuepress@aa638ee8411cacb28f51f1ef42acfbc12ae23a78#r36658709

If this is implemented, this will allow us to completely modify the Vue instance (using enhanceApp and CustomRouter view).

[sdaitzman]

@Axieum can you describe your use case for those additional modifications?

[Axieum]

I just implemented Content level transitions very easily. I'm assuming this issue is related to being able to transition upper level elements closer to the #app?

[sdaitzman]

The issue is that, to implement smooth transitions between different routes (and, therefore, layouts) requires including a direct parent of the router-view Vue element and specifying transitions in the same Vue file.

[CodesOfRa]

Hi 👋 @sdaitzman I am still planning to work on this, but I am a bit busy at the moment so if you have the time feel free to take it over

[sdaitzman]

@CodesOfRa thanks for letting me know! Do you have any work-in-progress somewhere that I could start from?