How to have page forward/back transitions in Inertia/Breeze app

Hello.

I have an Inertia/Laravel Breeze application (latest Laravel and Inertia beta). I would like forward/back transitions, however I can't figure out how this would work.

For example.

User first loads the app at / User navigates to /settings, this would be a forward transition They then hit a link to the homepage and navigate to / again, and a back transition is used as they're going back home

Then they hit /settings, a forward transition is applied Then /settings/profile and another forward animation

Then they hit home button and a back transition is applied

I'm not sure how to do this sort of thing in Laravel Inertia, I think in Vue you could use meta to store if it was "forward" or "back" but I wanted some opinions on things before I try to tackle it.

I can provide any necessary code or Information.

Regards.

jlrdw

3 years ago

Level 75

You might want to implement this using alpine js. Also have a look at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

joshuadempseygb

3 years ago

Level 1

@jlrdw thanks! The problem isn't really the transitions themselves, it's more as to how my app knows if the user is navigating forwards or backwards?

Forwards being moving further into nested routes, backwards meaning move to a less nested route than the current route.

Thanks for the links though, it makes some interesting reading 🙂

Please or to participate in this conversation.