Routing animations

[tom-ricci]

When client-side routing, we will support CSS animations for routing animations.

• One animation for page exit
• One animation for page enter
• These animations will be combined to make an exit and enter animation when routing between pages
• Animation targets:
  • Animations can be different based on the route
  • There can be a default animation
  • There can be enter animations for specific routes
  • There can be exit animations for specific routes
  • Basically, a component will define its enter and exit animations. It can specify whether an animation is default or should be only for one route. For example, the animation should be able to be defined such that when user goes from /about to /cart, /about will load specific about -> cart exit animation and cart will load specific about -> cart enter animation. These animations should support globbing. Animations should be found by how specific they are, so for example if a glob pattern exists for /products/* and a specific animation for /products/apple, when going to /products/apple the specific animation will load whereas any other product will load /products/*. If these animations do not exist, the default animation will be used. If the default does not exist, the component will not animate. Since enter and exit animations are different, a component can define a default or custom enter animation without defining a similar exit animation, and the router will just use the enter animation specified and will look for another exit animation which will work or will use no exit animation or vice versa.
• When the router is given a path from the static router, homepage should not load in or animate exit but rather the enter animation for the page loaded should be used.

Although, we might not do this. Maybe use optimistic UI instead with RR?