Skip to content

Commit

Permalink
Parallel transition (#4)
Browse files Browse the repository at this point in the history
* Add entering and exiting transition at the same time

Add a parallel property which should be renamed for more clarity. In
order to allow the exiting and entering transitions to run in sync.

Rewrite most of AnimatedSwitch and get rid of TransitionRoute and its
associated TransitionTransmitter.

Rename AnimatedSwitch in TransitionSwitch.

* Fix synchronisation Issues

Fix some issues in the synchronization. Like if the route changes while
transitioning.

Improve documentation.

Fix tests
  • Loading branch information
aboeglin committed Jul 12, 2017
1 parent c108089 commit a523615
Show file tree
Hide file tree
Showing 11 changed files with 286 additions and 277 deletions.
62 changes: 60 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,65 @@
Transitions for React Router v4. The API is composed of two components that will allow the Switch
component from react-router v4 to switch from a route to another one with a transition.

##API Description

###1) The component:
```javascript
<TransitionSwitch parallel={false}>
<Route exact path="/">
<Transition>home path</Transition>
</Route>
<Route path="/otherPath">
<Transition>other path</Transition>
</Route>
<Route path="/">
<Transition>other home</Transition>
</Route>
<Route path="/anotherPath">
<Transition>another path</Transition>
</Route>
</TransitionSwitch>
```

TransitionSwitch allows to perform transitions on route change. Given its name, it works like the router v4 Switch. It
means that only one route will be visible at all times. Except if parallel is set to true, which means that the entering
transition won't wait for the leaving transition to be finished.
NB: parallel may be renamed in the next revision.

###2) The transitions:
Like a switch, the children must be Route elements. The children of these route elements will be given hooks to perform
the transition. These hooks are :

```javascript
componentWillAppear(callback)

componentDidAppear()

componentWillEnter(callback)

componentDidEnter()

componentWillLeave(callback)

componentDidLeave()
```
The callbacks must be called after the transition is complete, in the case of animation, a good place is in the
onComplete. The interface is very much the same as react-trasition-group v1. Meaning that componentWillAppear is called
for the first time when the TransitionSwitch is mounted.

##Sample App

In case you want to quickly try it, there's a webpack setup and very rough sample app.
In order to build it you should run :
```
npm run build:example
npm run start:server
```
The app will be running at localhost:8080, the build command watches for changes in case you want to play with it, the
sources are located in src/example.


In the next update:
- do some testing
- improve the tests
- add warnings for uses that aren't allowed by the API.
- add an example app showcasing the API.
- improve the example app
2 changes: 1 addition & 1 deletion lib/react-router-v4-transition.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-transition-group": "^1.2.0"
"react-router-dom": "^4.1.1"
},
"peerDependencies": {
"react": "^15.0.0",
Expand Down Expand Up @@ -45,6 +44,7 @@
"scripts": {
"test": "jest",
"test:watch": "npm test -- --watch",
"test:coverage": "jest --coverage",
"test:ci": "jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
"build:dev": "webpack",
"build:prod": "webpack --progress -p",
Expand Down
75 changes: 0 additions & 75 deletions src/AnimatedSwitch.js

This file was deleted.

Loading

0 comments on commit a523615

Please sign in to comment.