Update demo and docs.

Author: marnusw

.eslintrc

@@ -155,7 +155,7 @@
     "no-multiple-empty-lines": [2, { // http://eslint.org/docs/rules/no-multiple-empty-lines
       "max": 2
     }],
-    "no-nested-ternary": 2,          // http://eslint.org/docs/rules/no-nested-ternary
+    "no-nested-ternary": 0,          // http://eslint.org/docs/rules/no-nested-ternary
     "no-new-object": 2,              // http://eslint.org/docs/rules/no-new-object
     "no-spaced-func": 2,             // http://eslint.org/docs/rules/no-spaced-func
     "no-trailing-spaces": 2,         // http://eslint.org/docs/rules/no-trailing-spaces

CHANGELOG.md

@@ -1,14 +1,15 @@
-### v3.0.0 (x May 2017)
+### v3.0.0 (27 August 2017)
 
+* [ENHANCEMENT] Treat a child rendering `null` as if there is no child; specifically helps avoid errors with RR4.
 * [ENHANCEMENT] Maintain component callback refs by not overwriting with string refs similar to `react-transition-group`.
 * [FEATURE] Only add the `isLeaving` prop to children if opted in with `notifyLeaving={true}` since it's 
             a departure from `react-transition-group` features.
 * [ENHANCEMENT] Use `requestAnimationFrame` to queue the height transition rather than a timeout.
 * [ENHANCEMENT] Handle the enter and leave animation of changes due to successive child updates before the current transition ends.
-  * Clear the selection after transitions to avoid the child being selected after multiple clicks.
-  * Entering child renders with absolute positioning since switching from relative to abs on a premature leave cancels the active enter animation.
-  * Fix enter animation of absolutely positioned elements in Chrome not working by skipping one animation frame in the Child component.
-  * Fix Edge glitch when render starts by always applying container `position`, `display` (use a `div`) and `overflow` styles.
+* [ENHANCEMENT] Clear the selection after transitions to avoid the child being selected after multiple clicks.
+* [ENHANCEMENT] Entering child renders with absolute positioning since switching from relative to abs on a premature leave cancels the active enter animation.
+* [ENHANCEMENT] Fix enter animation of absolutely positioned elements in Chrome not working by skipping one animation frame in the Child component.
+* [ENHANCEMENT] Fix Edge glitch when render starts by always applying container `position`, `display` (use a `div`) and `overflow` styles.
 
 ### v2.2.1 (29 April 2017)
 

README.md

@@ -39,8 +39,9 @@ follows the exact same API as `ReactCSSTransitionGroup`, with support for `trans
 and `transitionAppear`. When the `key` of the child component changes, the previous component is animated out 
 and the new component animated in. During this process:
 
- - The leaving component continues to be rendered as usual with `static` positioning.
- - The entering component is positioned on top of the leaving component with `absolute` positioning.
+ - All leaving components continue to be rendered; if the animation is slow there may be multiple components
+   in the process of leaving.
+ - The entering component is positioned on top of the leaving component(s) with `absolute` positioning.
  - The height of the container is set to that of the leaving component, and then immediately to that of the 
    entering component. If the `transitionName` is a `String` the `{animation-name}-height` class name is applied 
    to it, and if `transitionName` is an `Object` the `transitionName.height` class will be used if present.
@@ -145,6 +146,47 @@ the duration of the transition. In this case:
 See the live example [here](http://marnusw.github.io/react-css-transition-replace#fade-wait).
 
 
+### React-Router v4
+
+Animated transitions of react-router v4 routes is supported with two caveats shown in the example below:
+
+1. The current `location` must be applied to the `Switch` to force it to maintain the previous matched route on 
+   the leaving component.
+2. If the `Switch` might render `null`, i.e. there is no catch-all `"*"` route, the `Switch` must be wrapped in a 
+   `div` or similar for the leave transition to work; if not the previous component will disappear instantaneously
+   when there is no match.
+
+```javascript
+<Router>
+  <div className="router-example">
+    <ul>
+      <li><Link to="/">Home</Link></li>
+      <li><Link to="/one">One</Link></li>
+      <li><Link to="/two">Two</Link></li>
+      <li><Link to="/three">Three (no match)</Link></li>
+    </ul>
+    <Route render={({location}) => (
+      <ReactCSSTransitionReplace
+        transitionName="fade"
+        transitionEnterTimeout={500}
+        transitionLeaveTimeout={500}
+      >
+        <div key={location.pathname}>
+          <Switch location={location}>
+            <Route path="/" exact component={Home}/>
+            <Route path="/one" component={One}/>
+            <Route path="/two" component={Two}/>
+          </Switch>
+        </div>
+      </ReactCSSTransitionReplace>
+    )}/>
+  </div>
+</Router>
+```
+
+See the live example [here](http://marnusw.github.io/react-css-transition-replace#react-router-v4).
+
+
 ### Hardware acceleration for smoother transitions
 
 For smoother transitions hardware acceleration, which is achieved by using translate3d instead of the 2D 

UPGRADE_GUIDE.md

@@ -1,15 +1,18 @@
 # Upgrade Guide
 
+## 2.2.1 -> 3.0.0
+
+Applying the `isLeaving` prop on leaving children is now an opt-in behaviour controlled
+by the `notifyLeaving` prop.
+
+
 ## 2.1.0 -> 2.2.0
 
 The library has always had a bug causing subsequent changes while an animation is in 
 progress to be ignored. This has been fixed in v2.2.0. While the functioning of the 
 library is now technically more correct, this but may have been a feature used to 
 smooth over multiple transitions by some which will no longer be the case.
 
-If this causes problems it might be worthwhile to introduce a flag that could direct
-the component to ignore changes during transitions to restore the previous behaviour.
-
 
 ## 1.3.0 -> 2.0.0
 
@@ -20,7 +23,7 @@ You can pass `transitionName={{ height: 'my-height-className' }}` now, if
 you need to use a custom className (useful for `css-modules`).
 
 The leaving component will receive `isLeaving={true}` prop during it's leaving transition.
-You can use it in your child components to prevent their rerendering during that period, for example.
+You can use it in your child components to prevent their re-rendering during that period, for example.
 
 
 ## 1.0.x -> 1.1.0

demo/assets/styles.css

@@ -19,6 +19,10 @@ p {
   margin-bottom: 0;
 }
 
+hr {
+  border-color: #bbb;
+}
+
 .examples > p {
   margin-bottom: 20px;
 }

demo/components/AnimatedRouter.jsx

@@ -42,11 +42,13 @@ const AnimatedRouter = () => (
           transitionEnterTimeout={500}
           transitionLeaveTimeout={500}
         >
-          <Switch key={location.pathname} location={location}>
-            <Route path="/" exact component={Home}/>
-            <Route path="/one" component={One}/>
-            <Route path="/two" component={Two}/>
-          </Switch>
+          <div key={location.pathname}>
+            <Switch location={location}>
+              <Route path="/" exact component={Home}/>
+              <Route path="/one" component={One}/>
+              <Route path="/two" component={Two}/>
+            </Switch>
+          </div>
         </ReactCSSTransitionReplace>
       )}/>
 

demo/components/Demo.jsx

@@ -91,19 +91,25 @@ class Demo extends React.Component {
               <img key="img1" src="img/vista1.jpg" width="600" height="235"/>
             </ContentAddRemove>
 
-            <h3 id="roll-up">Height and Width animation</h3>
-            <p></p>
+            <h3 id="height-and-width">Height and Width animation</h3>
+            <p>By setting the <code>changeWidth</code> prop the container width is managed along with the height.
+              This example realizes the same effect as above using this property and just a fade CSS animation.
+              In this case the <code>height</code> class should configure the transition of both the height
+              and width properties: <code>transition: height .5s ease-in-out, width .5s ease-in-out;</code>
+            </p>
 
             <ContentAddRemove
               transitionName="fade-fast" transitionEnterTimeout={500} transitionLeaveTimeout={500} changeWidth
             >
               <img key="img1" src="img/vista1.jpg" width="600" height="235"/>
             </ContentAddRemove>
 
-            <h3 id="react-router">React Router v4</h3>
-            <p></p>
+            <h3 id="react-router-v4">React Router v4</h3>
+            <p>Animating React-Router v4 transitions is supported. See the <a
+              href="https://github.com/marnusw/react-css-transition-replace#cross-fading-two-components"
+              target="_blank">example</a> for details.</p>
 
-            <AnimatedRouter />
+            <AnimatedRouter/>
           </div>
         </Grid>
       </div>