├── .gitignore ├── bundle.js ├── images └── react.png ├── index.html ├── jsx ├── appear_todo.jsx ├── child.jsx ├── demo.jsx ├── enter_leave_todo.jsx └── grandchild.jsx ├── package.json ├── style.css └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huan-ji/react-transition-animation-demo/90592a8147722ee99a7168c4f682a08cb150a347/images/react.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Animation Demo 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /jsx/appear_todo.jsx: -------------------------------------------------------------------------------- 1 | var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 2 | var React = require('react'); 3 | 4 | var AppearTodoList = React.createClass({ 5 | getInitialState: function() { 6 | return {items: ['these', 'words', 'transition', 'in', 'when', 'mounted']}; 7 | }, 8 | render: function() { 9 | var items = this.state.items.map(function(item, i) { 10 | return ( 11 |
12 | {item} 13 |
14 | ) 15 | }); 16 | 17 | return ( 18 |
19 | 21 | {items} 22 | 23 |
24 | ); 25 | } 26 | }); 27 | 28 | 29 | module.exports = AppearTodoList; 30 | -------------------------------------------------------------------------------- /jsx/child.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 3 | var Link = require('react-router').Link; 4 | var EnterLeaveTodoList = require('./enter_leave_todo'); 5 | 6 | var Child = React.createClass({ 7 | cloneChildren: function () { 8 | var path = this.props.location.pathname; 9 | if (this.props.children) { 10 | return React.cloneElement(this.props.children, { key: path }) 11 | } 12 | }, 13 | 14 | render: function () { 15 | return ( 16 |
17 |

18 | 19 | Child Page 20 |

21 | 22 | Grandchild
23 | 24 | 25 |
26 |

Enter and Leave Transition Todo List:

27 | 28 |
29 | 30 | 32 | {this.cloneChildren()} 33 | 34 |
35 | ) 36 | } 37 | }) 38 | 39 | module.exports = Child; 40 | -------------------------------------------------------------------------------- /jsx/demo.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | var Router = require('react-router').Router; 4 | var Route = require('react-router').Route; 5 | var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 6 | var Link = require('react-router').Link; 7 | var IndexRoute = require('react-router').IndexRoute; 8 | var Child = require('./child'); 9 | var Grandchild = require('./grandchild'); 10 | 11 | var App = React.createClass({ 12 | render: function () { 13 | var path = this.props.location.pathname; 14 | var segment = path.split('/')[1] || 'root'; 15 | return ( 16 |
17 | 19 | 20 | 21 | 22 |
Child
23 | 24 | 26 | {React.cloneElement(this.props.children, { key: segment })} 27 | 28 |
29 | ) 30 | } 31 | }); 32 | 33 | var MockIndex = React.createClass({ 34 | render: function () { 35 | return
36 | } 37 | }) 38 | 39 | var routes = ( 40 | 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | 48 | 49 | 50 | document.addEventListener("DOMContentLoaded", function () { 51 | ReactDOM.render({routes}, document.getElementById("content")); 52 | }); 53 | -------------------------------------------------------------------------------- /jsx/enter_leave_todo.jsx: -------------------------------------------------------------------------------- 1 | var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 2 | var React = require('react'); 3 | 4 | var EnterLeaveTodoList = React.createClass({ 5 | getInitialState: function() { 6 | return {items: ['hello', 'world', 'click', 'me']}; 7 | }, 8 | handleAdd: function() { 9 | var newItems = 10 | this.state.items.concat([prompt('Enter some text')]); 11 | this.setState({items: newItems}); 12 | }, 13 | handleRemove: function(i) { 14 | var newItems = this.state.items.slice(); 15 | newItems.splice(i, 1); 16 | this.setState({items: newItems}); 17 | }, 18 | render: function() { 19 | var items = this.state.items.map(function(item, i) { 20 | return ( 21 |
22 | {item} 23 |
24 | ); 25 | }.bind(this)); 26 | return ( 27 |
28 | 29 | 31 | {items} 32 | 33 |
34 | ); 35 | } 36 | }); 37 | 38 | 39 | module.exports = EnterLeaveTodoList; 40 | -------------------------------------------------------------------------------- /jsx/grandchild.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Link = require('react-router').Link; 3 | var AppearTodoList = require('./appear_todo'); 4 | 5 | var Grandchild = React.createClass({ 6 | render: function () { 7 | return ( 8 |
9 |

10 | 11 | Grandchild Page 12 |

13 | 14 | Back
15 | 16 |
17 |

Appear Transtion Todo List

18 | 19 |
20 |
21 | ) 22 | } 23 | }) 24 | 25 | module.exports = Grandchild; 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_animation_demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "demo.jsx", 6 | "scripts": { 7 | "postinstall": "./node_modules/.bin/webpack" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "babel-core": "^6.3.21", 14 | "babel-loader": "^6.2.0", 15 | "babel-preset-react": "^6.3.13", 16 | "history": "^1.13.1", 17 | "react": "^0.14.3", 18 | "react-addons-css-transition-group": "^0.14.3", 19 | "react-dom": "^0.14.3", 20 | "react-router": "^1.0.2", 21 | "webpack": "^1.12.9" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, body, header, nav, h1, a, 2 | ul, li, strong, main, button, i, 3 | section, img, div, h2, p, form, 4 | fieldset, label, input, textarea, 5 | span, article, footer, time, small { 6 | margin: 0; 7 | padding: 10px; 8 | border: 0; 9 | outline: 0; 10 | color: inherit; 11 | text-decoration: inherit; 12 | } 13 | 14 | .pageSlider-leave { 15 | transform: translate3d(0, 0, 0); 16 | } 17 | 18 | .pageSlider-leave.pageSlider-leave-active { 19 | transform: translate3d(100%, 0, 0); 20 | transition: all 600ms; 21 | } 22 | 23 | .pageSlider-enter { 24 | transform: translate3d(100%, 0, 0); 25 | } 26 | 27 | .pageSlider-enter.pageSlider-enter-active { 28 | transform: translate3d(0, 0, 0); 29 | transition: all 600ms; 30 | } 31 | 32 | .page { 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 100%; 38 | z-index: 1000px; 39 | } 40 | 41 | h2 { 42 | text-align: center; 43 | background: white; 44 | color: black; 45 | } 46 | 47 | .example-enter { 48 | opacity: 0.01; 49 | } 50 | 51 | .example-enter.example-enter-active { 52 | opacity: 1; 53 | transition: opacity 500ms ease-in; 54 | } 55 | 56 | .example-leave { 57 | opacity: 1; 58 | } 59 | 60 | .example-leave.example-leave-active { 61 | opacity: 0.01; 62 | transition: opacity 300ms ease-in; 63 | } 64 | 65 | .example-appear { 66 | opacity: 0.01; 67 | } 68 | 69 | .example-appear.example-appear-active { 70 | opacity: 1; 71 | transition: opacity 1500ms ease-in; 72 | } 73 | 74 | a:hover { 75 | font-weight: bold; 76 | } 77 | 78 | img { 79 | display:block; 80 | margin-left: auto; 81 | margin-right: auto; 82 | } 83 | 84 | .home-image { 85 | position: absolute; 86 | width: 50px; 87 | height: 50px; 88 | top: 0px; 89 | cursor: pointer; 90 | } 91 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | context: __dirname, 3 | entry: "./jsx/demo.jsx", 4 | output: { 5 | path: "./", 6 | filename: "bundle.js" 7 | }, 8 | resolve: { 9 | extensions: ["", ".js", ".jsx"] 10 | }, 11 | module: { 12 | loaders: [ 13 | { 14 | test: /\.jsx?$/, 15 | exclude: /(node_modules|bower_components)/, 16 | loader: 'babel', 17 | query: { 18 | presets: ['react'] 19 | } 20 | }, 21 | { 22 | test: /\.node$/, 23 | loader: "node-loader" 24 | } 25 | ] 26 | } 27 | }; 28 | --------------------------------------------------------------------------------