React JS - Adding Transitions to Pages and Different Views
In this video I explain my approach on how to add transitions to page components in React JS. I am using react router and I want my different page components (in a single page app) to enter with a transition. I created a hoc (PageShell) to wrap the transitioned component. In this hoc, I used preset transitions from the Material UI library. Of course, we can set up our own CSS transitions/animations instead.
This approach is useful when we want to transition pages. I start with explaining the approach to create an animating wrapping component. Then, I add the option to change some transition properties (like the direction), and finally I add the ability to use different transitions within this wrapping component.
You can find the source code on https://github.com/judabne/react-dyna... . This isn't a complete project, it just holds the code for loading my components from arrays ( • React JS - Loading Components Dynamically ... ), adding transitions ( • React JS - Adding Transitions to Pages and... ), and creating forms ( • React JS - Creating Forms from the State ).
0:00 Creating a transition PageShell component
4:32 Adding the option to modify transition properties
5:55 Adding the ability to use use different transitions within PageShell