You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Is it possible to imitate native transitions using sprint on the router? I'm trying to imitate native navigation as in iOS, for example. On a push a screen slides in from the right, on a pop a screen slides out to the right, on a modal the screen slides in from the bottom, etc...
I've managed to do this with React Transition Group and CSS, but the performance was not good. The performance with React Sprint is the best one can get, so thanks for that!
Make sure to expand the browser pane so you can see the navigation buttons. The burger menu doesn't work.
I'll explain what I did with React Transition Group. I passed a navigationType prop on the router state, and that would indicate if this was a push, pop, etc... Then I would apply the correct css class to the component.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Is it possible to imitate native transitions using sprint on the router? I'm trying to imitate native navigation as in iOS, for example. On a push a screen slides in from the right, on a pop a screen slides out to the right, on a modal the screen slides in from the bottom, etc...
I've managed to do this with React Transition Group and CSS, but the performance was not good. The performance with React Sprint is the best one can get, so thanks for that!
Here's what I've based my code on. It's from a Youtuber:
https://codesandbox.io/s/fancy-page-route-animated-ndbn8?file=/src/App.jsx
Make sure to expand the browser pane so you can see the navigation buttons. The burger menu doesn't work.
I'll explain what I did with React Transition Group. I passed a
navigationType
prop on the router state, and that would indicate if this was a push, pop, etc... Then I would apply the correct css class to the component.Any help would be greatly appreciated.
Thanks!
Beta Was this translation helpful? Give feedback.
All reactions