From 6c25438f57c173a868777b331438a680835026f7 Mon Sep 17 00:00:00 2001 From: arufian-b Date: Thu, 7 Apr 2016 16:12:30 +0900 Subject: [PATCH 1/2] added capability to use different animations for enter and leave --- README.md | 22 +++++++++++--- examples/leave/.babelrc | 3 ++ examples/leave/README.md | 27 ++++++++++++++++++ examples/leave/actions/count.js | 15 ++++++++++ examples/leave/app.js | 46 ++++++++++++++++++++++++++++++ examples/leave/components/App.js | 33 +++++++++++++++++++++ examples/leave/components/Bar.js | 5 ++++ examples/leave/components/Foo.js | 5 ++++ examples/leave/components/Home.js | 19 ++++++++++++ examples/leave/components/index.js | 4 +++ examples/leave/constants.js | 3 ++ examples/leave/index.html | 11 +++++++ examples/leave/package.json | 34 ++++++++++++++++++++++ examples/leave/reducers/count.js | 15 ++++++++++ examples/leave/reducers/index.js | 1 + examples/leave/webpack.config.js | 36 +++++++++++++++++++++++ src/easy-transition.js | 17 +++++++++-- 17 files changed, 290 insertions(+), 6 deletions(-) create mode 100644 examples/leave/.babelrc create mode 100644 examples/leave/README.md create mode 100644 examples/leave/actions/count.js create mode 100644 examples/leave/app.js create mode 100644 examples/leave/components/App.js create mode 100644 examples/leave/components/Bar.js create mode 100644 examples/leave/components/Foo.js create mode 100644 examples/leave/components/Home.js create mode 100644 examples/leave/components/index.js create mode 100644 examples/leave/constants.js create mode 100644 examples/leave/index.html create mode 100644 examples/leave/package.json create mode 100644 examples/leave/reducers/count.js create mode 100644 examples/leave/reducers/index.js create mode 100644 examples/leave/webpack.config.js diff --git a/README.md b/README.md index ffdfea1..80c1b0f 100644 --- a/README.md +++ b/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' - ``` +Set leave animation transition on different properties: + +```jsx + + {this.props.children} + +``` + ## 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 diff --git a/examples/leave/.babelrc b/examples/leave/.babelrc new file mode 100644 index 0000000..7bff196 --- /dev/null +++ b/examples/leave/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015", "react", "stage-1"] +} diff --git a/examples/leave/README.md b/examples/leave/README.md new file mode 100644 index 0000000..5728d25 --- /dev/null +++ b/examples/leave/README.md @@ -0,0 +1,27 @@ +react-easy-transition basic example +=================================== + +In components/App.js, we wrap props.children in an +```jsx + +``` +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 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/) + diff --git a/examples/leave/actions/count.js b/examples/leave/actions/count.js new file mode 100644 index 0000000..9f17d4f --- /dev/null +++ b/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 + } +} diff --git a/examples/leave/app.js b/examples/leave/app.js new file mode 100644 index 0000000..bbe78c2 --- /dev/null +++ b/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( + + + +) + +const store = createStore( + reducer, + DevTools.instrument() +) +const history = syncHistoryWithStore(browserHistory, store) + +ReactDOM.render( + +
+ + + + + + + + +
+ , + document.getElementById('mount') +) diff --git a/examples/leave/components/App.js b/examples/leave/components/App.js new file mode 100644 index 0000000..cd76e9c --- /dev/null +++ b/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 ( +
+
+ Links: + {' '} + Home + {' '} + Foo + {' '} + Bar +
+
+ +
+
+ + {props.children} + +
+
+ ) +} diff --git a/examples/leave/components/Bar.js b/examples/leave/components/Bar.js new file mode 100644 index 0000000..ceb92d0 --- /dev/null +++ b/examples/leave/components/Bar.js @@ -0,0 +1,5 @@ +import React from 'react' + +export default function Bar() { + return
And I am Bar!
+} diff --git a/examples/leave/components/Foo.js b/examples/leave/components/Foo.js new file mode 100644 index 0000000..ab7a8b0 --- /dev/null +++ b/examples/leave/components/Foo.js @@ -0,0 +1,5 @@ +import React from 'react' + +export default function Foo() { + return
I am Foo!
+} diff --git a/examples/leave/components/Home.js b/examples/leave/components/Home.js new file mode 100644 index 0000000..a719792 --- /dev/null +++ b/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 ( +
+ Some state changes: + {number} + + +
+ ) +} + +export default connect( + state => ({ number: state.count.number }), + { increase, decrease } +)(Home) diff --git a/examples/leave/components/index.js b/examples/leave/components/index.js new file mode 100644 index 0000000..80ae93f --- /dev/null +++ b/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' diff --git a/examples/leave/constants.js b/examples/leave/constants.js new file mode 100644 index 0000000..64aade4 --- /dev/null +++ b/examples/leave/constants.js @@ -0,0 +1,3 @@ + +export const INCREASE = 'INCREASE' +export const DECREASE = 'DECREASE' diff --git a/examples/leave/index.html b/examples/leave/index.html new file mode 100644 index 0000000..5452876 --- /dev/null +++ b/examples/leave/index.html @@ -0,0 +1,11 @@ + + + + react-router-redux basic example + + + +
+ + + diff --git a/examples/leave/package.json b/examples/leave/package.json new file mode 100644 index 0000000..1c321eb --- /dev/null +++ b/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" + } +} diff --git a/examples/leave/reducers/count.js b/examples/leave/reducers/count.js new file mode 100644 index 0000000..1c866ff --- /dev/null +++ b/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 +} diff --git a/examples/leave/reducers/index.js b/examples/leave/reducers/index.js new file mode 100644 index 0000000..2907d17 --- /dev/null +++ b/examples/leave/reducers/index.js @@ -0,0 +1 @@ +export count from './count' diff --git a/examples/leave/webpack.config.js b/examples/leave/webpack.config.js new file mode 100644 index 0000000..4595c70 --- /dev/null +++ b/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 + }); +}*/ diff --git a/src/easy-transition.js b/src/easy-transition.js index 95b4305..b87e4c3 100644 --- a/src/easy-transition.js +++ b/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({ @@ -36,11 +37,19 @@ export default class EasyTransition extends Component { class TransitionChild extends Component { componentWillAppear(callback) { + console.log('componentWillAppear'); this.componentFadeIn(callback) } + componentDidAppear(){ + console.log('componentDidAppear'); + } componentWillEnter(callback) { + console.log('componentWillEnter'); this.componentFadeIn(callback) } + componentDidEnter() { + console.log('componentDidEnter'); + } componentFadeIn(callback) { Object.assign(this.page.style, this.props.initialStyle) Object.keys(this.props.initialStyle).forEach(property => window.getComputedStyle(this.page)[property]) @@ -54,7 +63,8 @@ class TransitionChild extends Component { }, false) } componentWillLeave(callback) { - Object.assign(this.page.style, this.props.initialStyle) + console.log('componentWillLeave'); + Object.assign(this.page.style, this.props.leaveStyle) let transitionsRemaining = this.props.transition.split(',').length this.page.addEventListener("transitionend", (event) => { transitionsRemaining-- @@ -63,6 +73,9 @@ class TransitionChild extends Component { this.props.childDidLeave() }, false) } + componentDidLeave() { + console.log('componentDidLeave'); + } render() { return
this.page = ref}> {this.props.children} From 7e17a415249f8c34807153c7d5f16d2bb71b71d7 Mon Sep 17 00:00:00 2001 From: arufian-b Date: Mon, 11 Apr 2016 14:25:35 +0900 Subject: [PATCH 2/2] removed unncessary debugging codes --- src/easy-transition.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/easy-transition.js b/src/easy-transition.js index b87e4c3..c874209 100644 --- a/src/easy-transition.js +++ b/src/easy-transition.js @@ -37,19 +37,11 @@ export default class EasyTransition extends Component { class TransitionChild extends Component { componentWillAppear(callback) { - console.log('componentWillAppear'); this.componentFadeIn(callback) } - componentDidAppear(){ - console.log('componentDidAppear'); - } componentWillEnter(callback) { - console.log('componentWillEnter'); this.componentFadeIn(callback) } - componentDidEnter() { - console.log('componentDidEnter'); - } componentFadeIn(callback) { Object.assign(this.page.style, this.props.initialStyle) Object.keys(this.props.initialStyle).forEach(property => window.getComputedStyle(this.page)[property]) @@ -63,7 +55,6 @@ class TransitionChild extends Component { }, false) } componentWillLeave(callback) { - console.log('componentWillLeave'); Object.assign(this.page.style, this.props.leaveStyle) let transitionsRemaining = this.props.transition.split(',').length this.page.addEventListener("transitionend", (event) => { @@ -73,9 +64,6 @@ class TransitionChild extends Component { this.props.childDidLeave() }, false) } - componentDidLeave() { - console.log('componentDidLeave'); - } render() { return
this.page = ref}> {this.props.children}