Merge pull request #2 from arufian/leave-animation-properties

Leave animation properties

README.md

@@ -13,7 +13,7 @@ For a simple fade-out fade-in effect on route change with react-router :
 ```jsx
 import EasyTransition from 'react-easy-transition'
 
-<EasyTransition 
+<EasyTransition
     path={location.pathname}
     initialStyle={{opacity: 0}}
     transition="opacity 0.3s ease-in"
@@ -26,7 +26,7 @@ import EasyTransition from 'react-easy-transition'
 Multiple transitions on different properties:
 
 ```jsx
-<EasyTransition 
+<EasyTransition
     path={location.pathname}
     initialStyle={{opacity: 0, color: 'red'}}
     transition="opacity 0.3s ease-in, color 0.5s ease-in"
@@ -36,14 +36,28 @@ Multiple transitions on different properties:
 </EasyTransition>
 ```
 
+Set leave animation transition on different properties:
+
+```jsx
+<EasyTransition
+    path={location.pathname}
+    initialStyle={{opacity: 0, color: 'red'}}
+    transition="opacity 0.3s ease-in, color 0.5s ease-in"
+    finalStyle={{opacity: 1, color: 'green'}}
+    leaveStyle={{opacity: 0, color: 'gray'}}
+>
+    {this.props.children}
+</EasyTransition>
+```
+
 ## Live Demo
 
 Live Demo here : http://misterfresh.github.io/react-easy-transition
 
 ## Why use this
 
-* Small : only 70 lines of code 
-* Lightweight : based on ReactTransitionGroup low level API 
+* Small : only 70 lines of code
+* Lightweight : based on ReactTransitionGroup low level API
 * Easy: works out of the box with React Router 2.0, no need to define CSS classes, use Javascript objects to define transition styles.
 * Performance : still using native browser CSS transition under the hood
 * Flexible : support for multiple transitions

examples/leave/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["es2015", "react", "stage-1"]
+}

examples/leave/README.md

@@ -0,0 +1,27 @@
+react-easy-transition basic example
+===================================
+
+In components/App.js, we wrap props.children in an 
+```jsx
+<EasyTransition>
+``` 
+tag. That's it.
+
+Demo : http://misterfresh.github.io/react-easy-transition
+
+Based on react-router-redux basic example. 
+
+This is a basic example that demonstrates rendering components based
+on URLs with `react-router` as well as connecting them to Redux state.
+It uses both <Link> elements as well as the `push` action creator
+provided by react-router-redux.
+
+This example also demonstrates integration with
+**[redux-devtools](https://github.com/gaearon/redux-devtools) ^3.0.0**
+
+**To run, follow these steps:**
+
+1. Install dependencies with `npm install` in this directory (make sure it creates a local node_modules)
+2. Start build with `npm start`
+3. Open [http://localhost:8080/](http://localhost:8080/)
+

examples/leave/actions/count.js

@@ -0,0 +1,15 @@
+import { INCREASE, DECREASE } from '../constants'
+
+export function increase(n) {
+  return {
+    type: INCREASE,
+    amount: n
+  }
+}
+
+export function decrease(n) {
+  return {
+    type: DECREASE,
+    amount: n
+  }
+}

examples/leave/app.js

@@ -0,0 +1,46 @@
+import { createDevTools } from 'redux-devtools'
+import LogMonitor from 'redux-devtools-log-monitor'
+import DockMonitor from 'redux-devtools-dock-monitor'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { createStore, combineReducers } from 'redux'
+import { Provider } from 'react-redux'
+import { Router, Route, IndexRoute, browserHistory } from 'react-router'
+import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
+
+import * as reducers from './reducers'
+import { App, Home, Foo, Bar } from './components'
+
+const reducer = combineReducers({
+  ...reducers,
+  routing: routerReducer
+})
+
+const DevTools = createDevTools(
+  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
+    <LogMonitor theme="tomorrow" preserveScrollTop={false} />
+  </DockMonitor>
+)
+
+const store = createStore(
+  reducer,
+  DevTools.instrument()
+)
+const history = syncHistoryWithStore(browserHistory, store)
+
+ReactDOM.render(
+  <Provider store={store}>
+    <div>
+      <Router history={history}>
+        <Route path="/" component={App}>
+          <IndexRoute component={Home}/>
+          <Route path="foo" component={Foo}/>
+          <Route path="bar" component={Bar}/>
+        </Route>
+      </Router>
+      <DevTools />
+    </div>
+  </Provider>,
+  document.getElementById('mount')
+)

examples/leave/components/App.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Link, browserHistory } from 'react-router'
+import EasyTransition from 'react-easy-transition'
+
+export default function App(props) {
+    return (
+    <div>
+      <header>
+        Links:
+        {' '}
+        <Link to="/">Home</Link>
+        {' '}
+        <Link to="/foo">Foo</Link>
+        {' '}
+        <Link to="/bar">Bar</Link>
+      </header>
+      <div>
+        <button onClick={() => browserHistory.push('/foo')}>Go to /foo</button>
+      </div>
+      <div style={{ marginTop: '1.5em' }}>
+          <EasyTransition
+              path={props.location.pathname}
+              initialStyle={{opacity: 0, transform: 'scaleY(0.5)'}}
+              transition="opacity 0.8s ease-in, transform 0.3s ease-in-out 0.3s"
+              finalStyle={{opacity: 1, transform: 'scaleY(1.2)'}}
+              leaveStyle={{opacity: 0, transform: 'translateX(-100px)'}}
+          >
+              {props.children}
+          </EasyTransition>
+      </div>
+    </div>
+  )
+}

examples/leave/components/Bar.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Bar() {
+  return <div>And I am Bar!</div>
+}

examples/leave/components/Foo.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Foo() {
+  return <div>I am Foo!</div>
+}

examples/leave/components/Home.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { increase, decrease } from '../actions/count'
+
+function Home({ number, increase, decrease }) {
+  return (
+    <div>
+      Some state changes:
+      {number}
+      <button onClick={() => increase(1)}>Increase</button>
+      <button onClick={() => decrease(1)}>Decrease</button>
+    </div>
+  )
+}
+
+export default connect(
+  state => ({ number: state.count.number }),
+  { increase, decrease }
+)(Home)

examples/leave/components/index.js

@@ -0,0 +1,4 @@
+export App from './App'
+export Home from './Home'
+export Foo from './Foo'
+export Bar from './Bar'

examples/leave/constants.js

@@ -0,0 +1,3 @@
+
+export const INCREASE = 'INCREASE'
+export const DECREASE = 'DECREASE'

examples/leave/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>react-router-redux basic example</title>
+    <meta charset="utf8"/>
+  </head>
+  <body>
+    <div id="mount"></div>
+    <script src="/bundle.js"></script>
+  </body>
+</html>

examples/leave/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "ret-basic-example",
+  "version": "0.0.1",
+  "repository": "reactjs/react-easy-transition",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-redux": "^4.3.0",
+    "react-router": "^2.0.0",
+    "react-router-redux": "^4.0.0",
+    "redux": "^3.2.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.4.5",
+    "babel-eslint": "^5.0.0-beta9",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-1": "^6.3.13",
+    "eslint": "^1.10.3",
+    "eslint-config-rackt": "^1.1.1",
+    "eslint-plugin-react": "^3.16.1",
+    "redux-devtools": "^3.1.0",
+    "redux-devtools-dock-monitor": "^1.0.1",
+    "redux-devtools-log-monitor": "^1.0.4",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --history-api-fallback --no-info --open",
+    "deploy": "NODE_ENV=production webpack -p"
+  }
+}

examples/leave/reducers/count.js

@@ -0,0 +1,15 @@
+import { INCREASE, DECREASE } from '../constants'
+
+const initialState = {
+  number: 1
+}
+
+export default function update(state = initialState, action) {
+  if(action.type === INCREASE) {
+    return { number: state.number + action.amount }
+  }
+  else if(action.type === DECREASE) {
+    return { number: state.number - action.amount }
+  }
+  return state
+}

examples/leave/reducers/index.js

@@ -0,0 +1 @@
+export count from './count'

examples/leave/webpack.config.js

@@ -0,0 +1,36 @@
+/* eslint-disable */
+const path = require('path');
+
+module.exports = {
+  entry: './app.js',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loader: 'babel',
+      exclude: /node_modules/,
+      include: __dirname
+    }]
+  }
+}
+
+
+
+// This will make the redux-simpler-router module resolve to the
+// latest src instead of using it from npm. Remove this if running
+// outside of the source.
+var src = path.join(__dirname, '..', '..', 'src')
+var fs = require('fs')
+/*
+if (fs.existsSync(src)) {
+  // Use the latest src
+  module.exports.resolve = { alias: { 'react-router-redux': src } }
+  module.exports.module.loaders.push({
+    test: /\.js$/,
+    loaders: ['babel'],
+    include: src
+  });
+}*/

src/easy-transition.js

@@ -10,7 +10,8 @@ export default class EasyTransition extends Component {
         path: React.PropTypes.string.isRequired,
         initialStyle: React.PropTypes.object.isRequired,
         transition: React.PropTypes.string.isRequired,
-        finalStyle: React.PropTypes.object.isRequired
+        finalStyle: React.PropTypes.object.isRequired,
+        leaveStyle: React.PropTypes.object.isRequired
     };
     componentWillReceiveProps(nextProps) {
         this.setState({
@@ -54,7 +55,7 @@ class TransitionChild extends Component {
         }, false)
     }
     componentWillLeave(callback) {
-        Object.assign(this.page.style, this.props.initialStyle)
+        Object.assign(this.page.style, this.props.leaveStyle)
         let transitionsRemaining = this.props.transition.split(',').length
         this.page.addEventListener("transitionend", (event) => {
             transitionsRemaining--