Saved searches
Use saved searches to filter your results more quickly
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.
Highly customizable page transition component for your React Router
License
trungdq88/react-router-page-transition
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
React Router Page Transition
Highly customizable page transition component for your React Router
Currently does not fully support react-router 4, see Using with React Router 4.
React Router is awesome, but doing transition between pages is hard, especially for complex ones.
No worries react-router-page-transition is here to help. You can use css to define your own transition effect with custom data and callbacks, so now you can apply cool technique like FLIP your animation and implement cool transitions like this:
npm install react-router-page-transition --save import PageTransition from 'react-router-page-transition';
PageTransition> this.props.children> /PageTransition> - Important: this.props.children must have transition-item class in its root element. Example if you are passing as this.props.children :
export default class ListPage extends React.Component render() return ( div id="list-page" class="transition-item"> . /div> ); > >
- PageTransition component renders inside a .
.
- When the route change, CSS classes will be added as following:
Example: sliding animation
.detail-page < overflow: auto; box-sizing: border-box; padding: 20px; height: 100vh; background-color: #03a9f4; transition: transform 0.5s, opacity 0.5s; &.transition-appear < opacity: 0; transform: translate3d(100%, 0, 0); > &.transition-appear.transition-appear-active < opacity: 1; transform: translate3d(0, 0, 0); > &.transition-leave < opacity: 1; transform: translate3d(0, 0, 0); > &.transition-leave.transition-leave-active < opacity: 0; transform: translate3d(100%, 0, 0); > >
Sometimes it is impossible to implement your designer’s awesome animation idea in just only CSS. In that case, you’ll need the callbacks to customize your animation with additional data. See API document and example for more information.
- timeout: transition duration in milisecond, this must be the same with the transition-duration in your CSS. Example:
PageTransition timeout=500>> props.children> /PageTransition> PageTransition data= clickedItemData: this.state.clickedItemData >> > this.props.children> /PageTransition> PageTransition onLoad=() => this.refs.scrollArea.scrollTop = 0> > this.props.children> /PageTransition> PageTransition transitionAction=this.props.history.action> > this.props.children> /PageTransition> Callback on children component
PageTransition component calls a several callbacks to its child component to pass user defined additional data for the animation. Child components are mounted via React Router when the route change.
Notice: all these callbacks will be called in a Promise chain, so if you are handleing async tasks inside the callback (for example setState ), make sure you return a Promise to make everything work properly.
- onTransitionWillStart(data): before the transition starts (before transition-appear-active class is added). data is the variable received from the data property of PageTransition .
- transitionManuallyStart(data): if you don’t use transition-appear-active class in CSS to animate your page, you can define this method in the child component to do the animation mannually. transition-appear-active will not be added to the child’s DOM when this method exists.
- onTransitionDidStart(data): after the transition started.
- onTransitionWillEnd(data): before the transition stops (before transition-appear-active class is removed).
- transitionManuallyStop(data): similar to transitionManuallyStart . transition-appear-active will not be removed to the child’s DOM when this method exists.
- onTransitionDidEnd(data): after the transition stopped (after transition-appear-active class is removed) Example:
export default class DetailPage extends React.Component . onTransitionWillStart(data) return new Promise(resolve => this.setState( animating: false, postiton: data.position, opacity: 0 >, resolve); >); > transitionManuallyStart(data) return new Promise(resolve => this.setState( animating: true, postiton: DEFAULT_POSITION, opacity: 1 >, resolve); >); > onTransitionDidStart(data) // Animation is happening > onTransitionWillEnd(data) // Animation is about to stop > transitionManuallyStop(data) return new Promise(resolve => this.setState( animating: false >, resolve); >); > onTransitionDidEnd(data) // Page successfully replaced and finished animate this.callMyBusinessApi(); > .
Similar callbacks for leave event:
- onTransitionLeaveWillStart(data)
- transitionLeaveManuallyStart(data)
- onTransitionLeaveDidStart(data)
- onTransitionLeaveWillEnd(data)
- transitionLeaveManuallyStop(data)
- onTransitionLeaveDidEnd(data)
Available CSS functional class names
- transition-appear , transition-appear-active , transition-leave , transition-leave-active .
- Root element of the transited page must have transition-item class.
By default, PageTransition will animates its children when componentWillReceiveProps is triggered. It compares this.props.children !== nextProps.children to know if the page has changed (ex: move from page Login to page AdminPanel).
When using PageTransition with Redux, you may end up having the animation triggered everytime the Redux state changes (ex: state change when you enter username, componentWillReceiveProps is triggered but the page is still Login page). In order to resolve this, you can use data-transition-id for the child components.
PageTransition> isLoggedIn() ? AdminPanel data-transition-id="admin-page" ... /> : Login data-transition-id="login-page" ... /> > /PageTransition> When data-transition-id prop is provided, PageTransition will use this value to compare the childrens. Now you can control exactly when will the pages are changed.
Using with React Router 4
At the moment, callbacks are not supported on React Router 4, however the basic CSS transitions still works. You have to wrap your with . Please notice that you have to pass the location prop to to make it work.
PageTransition> Switch location=this.props.location>> Route exact path="/" component=ListPage> /> Route path="/detail/:itemId" component=ItemDetailPage> /> /Switch> /PageTransition> - Give you ability to implement complex animations / transitions.
- Keep page structure clean.