Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sleexyz/react-router-tween
state tweening page transitions for react router
https://github.com/sleexyz/react-router-tween
Last synced: 1 day ago
JSON representation
state tweening page transitions for react router
- Host: GitHub
- URL: https://github.com/sleexyz/react-router-tween
- Owner: sleexyz
- Created: 2015-06-14T05:21:10.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-06-16T06:48:03.000Z (over 9 years ago)
- Last Synced: 2024-04-14T11:22:41.708Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 133 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-router-tween
Provides tweening state transitions for [react-router](https://github.com/rackt/react-router) on route entrances and exits.
RRT binds `this.state.presence` in a component, which tweens from 0 to 1 when the component is mounted. When our route changes, the `presence` variable tweens back to 0 and the component is unmounted.
RRT uses [react-set-state-tween](https://github.com/freshdried/react-set-state-tween), a promises wrapper around [react-tween-state](https://github.com/chenglou/react-tween-state)
## install
```
npm install --save react-router-tween
```
## example
*on page load:*
- Outer is mounted.
- Outer tweens `presence` from 0 to 1. (opacity fade-in)
- InnerA is mounted.
- InnerA tweens `presence` from 0 to 1. (opacity fade-in)
*when route switches to InnerB:*
- InnerA tweens `presence` from 1 to 0. (opacity fade-out)
- InnerA is unmounted.
- InnerB is mounted.
- InnerB tweens `presence` from 0 to 1. (opacity fade-in)
```javascript
import React from "react"
import Promise from "bluebird"
import RRT from "react-router-tween"
import Router from "react-router"
const {Route, DefaultRoute, RouteHandler} = Router;
const Outer = React.createClass({
mixins: [RRT],
render() {
let presence = this.getTweeningValue("presence");
let style = { opacity: presence };
//Here we specify to mount subroutes only when the fade-in completes.
//We could very much mount RouteHandler directly, so that
//Outer and Inner would fade-in in parallel
let routehandler = (presence === 1)
?
: null;
return (
Hello World
Home (InnerA)
InnerB
{routehandler}
)
}
});
const InnerA = React.createClass({
mixins: [RRT],
render() {
let presence = this.getTweeningValue("presence");
let style = { opacity: presence}; //fade-in and fade-out
return (
A
)
}
});
const InnerB = React.createClass({
mixins: [RRT],
render() {
let presence = this.getTweeningValue("presence");
let style = { opacity: presence}; //fade-in and fade-out
return (
B
)
}
});
const routes = (
);
Router.run(routes, Router.HashLocation,
(Handler) => React.render(, document.body));
```
## custom tweening behavior
#### Override entrance behavior by providing `this.enterTween()`
`this.enterTween() -> Promise`
```javascript
// default enterTween
...
enterTween() {
return this.setStateTween({presence: 1}, {
duration: 300,
easing: tweenState.easingTypes.easeInOutQuad
});
}
...
```
#### Override exit behavior by providing `this.exitTween()`
`this.exitTween() -> Promise`
```javascript
// default exitTween
...
exitTween() {
return this.setStateTween({presence: 0}, {
duration: 300,
easing: tweenState.easingTypes.easeInOutQuad
});
}
...
```
#### example custom tweens
*when route changes to InnerC*
- InnerC is mounted.
- InnerC tweens `presence`to 1 (linear, 500ms)
- InnerC tweens `presence` to 0 (easeInOutQuad, 1000ms)
- InnerC tweens `presence` to 1 (easeInOutQuad, 1000ms)
*when route changes out*
- InnerC tweens `presence` to 0 (easeInOutQuad, 1000ms)
```javascript
import tweenState from "react-tween-state"
...
const InnerC = React.createClass({
mixins: [RRT],
enterTween() {
return this.setStateTween({presence: 1}, {
duration: 500,
easing: tweenState.easingTypes.linear
})
.then(() => this.setStateTween({presence: 0}, {duration: 1000}))
.then(() => this.setStateTween({presence: 1}, {duration: 1000}));
},
exitTween() {
return this.setStateTween({presence: 0}, {duration: 1000});
},
render() {
let presence = this.getTweeningValue("presence");
let style = { opacity: presence };
return (
C
);
}
});
...
```