Merge pull request #2454 from rackt/fix-animations-example

Fix animations examples

Author: taion

examples/animations/app.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render } from 'react-dom'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import StaticContainer from 'react-static-container'
 import { createHistory, useBasename } from 'history'
 import { Router, Route, Link } from 'react-router'
 
@@ -10,23 +11,62 @@ const history = useBasename(createHistory)({
   basename: '/animations'
 })
 
-class App extends React.Component {
+class RouteCSSTransitionGroup extends React.Component {
+  static contextTypes = {
+    location: React.PropTypes.object
+  }
+
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      previousPathname: null
+    }
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextContext.location.pathname !== this.context.location.pathname) {
+      this.setState({ previousPathname: this.context.location.pathname })
+    }
+  }
+
   render() {
-    const { pathname } = this.props.location
+    const { children, ...props } = this.props
+    const { previousPathname } = this.state
+
+    return (
+      <ReactCSSTransitionGroup {...props}>
+        <StaticContainer
+          key={previousPathname || this.context.location.pathname}
+          shouldUpdate={!previousPathname}
+        >
+          {children}
+        </StaticContainer>
+      </ReactCSSTransitionGroup>
+    )
+  }
 
+  componentDidUpdate() {
+    if (this.state.previousPathname) {
+      this.setState({ previousPathname: null })
+    }
+  }
+}
+
+class App extends React.Component {
+  render() {
     return (
       <div>
         <ul>
           <li><Link to="/page1">Page 1</Link></li>
           <li><Link to="/page2">Page 2</Link></li>
         </ul>
-        <ReactCSSTransitionGroup component="div"
-                                 transitionName="example"
-                                 transitionEnterTimeout={500}
-                                 transitionLeaveTimeout={500}
+        <RouteCSSTransitionGroup
+          component="div" transitionName="example"
+          transitionEnterTimeout={500} transitionLeaveTimeout={500}
         >
-          {React.cloneElement(this.props.children || <div />, { key: pathname })}
-        </ReactCSSTransitionGroup>
+          {this.props.children}
+        </RouteCSSTransitionGroup>
       </div>
     )
   }

examples/nested-animations/app.js

@@ -23,7 +23,10 @@ class App extends React.Component {
           <li><Link to="/page1">Page 1</Link></li>
           <li><Link to="/page2">Page 2</Link></li>
         </ul>
-        <ReactCSSTransitionGroup component="div" transitionName="swap">
+        <ReactCSSTransitionGroup
+          component="div" transitionName="swap"
+          transitionEnterTimeout={500} transitionLeaveTimeout={500}
+        >
           {React.cloneElement(this.props.children || <div />, { key: key })}
         </ReactCSSTransitionGroup>
       </div>
@@ -42,7 +45,10 @@ class Page1 extends React.Component {
           <li><Link to="/page1/tab1">Tab 1</Link></li>
           <li><Link to="/page1/tab2">Tab 2</Link></li>
         </ul>
-        <ReactCSSTransitionGroup component="div" transitionName="example">
+        <ReactCSSTransitionGroup
+          component="div" transitionName="example"
+          transitionEnterTimeout={500} transitionLeaveTimeout={500}
+        >
           {React.cloneElement(this.props.children || <div/>, { key: pathname })}
         </ReactCSSTransitionGroup>
       </div>
@@ -61,7 +67,10 @@ class Page2 extends React.Component {
           <li><Link to="/page2/tab1">Tab 1</Link></li>
           <li><Link to="/page2/tab2">Tab 2</Link></li>
         </ul>
-        <ReactCSSTransitionGroup component="div" transitionName="example">
+        <ReactCSSTransitionGroup
+          component="div" transitionName="example"
+          transitionEnterTimeout={500} transitionLeaveTimeout={500}
+        >
           {React.cloneElement(this.props.children || <div/>, { key: pathname })}
         </ReactCSSTransitionGroup>
       </div>

package.json

@@ -65,6 +65,7 @@
     "react-addons-css-transition-group": "^0.14.0",
     "react-addons-test-utils": "0.14.0",
     "react-dom": "^0.14.0",
+    "react-static-container": "^1.0.0",
     "rf-changelog": "^0.4.0",
     "style-loader": "^0.12.4",
     "webpack": "^1.4.13",