Skip to content

Enome/react-router-transition-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React with routes and page transitions

This example uses page.js for routing and CSSTransitionGroup for transitions. Each component has a transition state associated with it. Instead of using that transition state name for setting transitionName on CSSTransitionGroup it's uses the name to generate a new transitionName based on the previous transition.

An array is used to generate the transitionName:

var transitions = [ 
  { from: 'none',  to: 'overlay', transition: { name: 'none-overlay', enter: true, leave: true } },
];

So if the current page component has the transition 'none' and the new component has the transition 'overlay' the transitionName will be 'none-overlay'.

Run

npm i
node server

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published