Add a demo where height transition is detailed until after leave.

Author: marnusw

demo/assets/transitions.css

@@ -24,25 +24,33 @@
 
 /* Fade out, then fade in transition */
 
-.fade-wait-leave {
+.fade-wait-leave,
+.fade-wait-delay-leave {
   opacity: 1;
 }
-.fade-wait-leave.fade-wait-leave-active {
+.fade-wait-leave.fade-wait-leave-active,
+.fade-wait-delay-leave.fade-wait-delay-leave-active {
   opacity: 0;
   transition: opacity .4s ease-in;
 }
 
-.fade-wait-enter {
+.fade-wait-enter,
+.fade-wait-delay-enter {
   opacity: 0;
 }
-.fade-wait-enter.fade-wait-enter-active {
+.fade-wait-enter.fade-wait-enter-active,
+.fade-wait-delay-enter.fade-wait-delay-enter-active {
   opacity: 1;
   /* Delay the enter animation until the leave completes */
-  transition: opacity .4s ease-in .6s;
+  transition: opacity .4s ease-in .4s;
 }
 
 .fade-wait-height {
-  transition: height .6s ease-in-out;
+  transition: height .8s ease-in-out;
+}
+.fade-wait-delay-height {
+  /* Delay the height animation until the leave completes */
+  transition: height .4s ease-in-out .4s;
 }
 
 

demo/components/Demo.jsx

@@ -56,16 +56,24 @@ class Demo extends React.Component {
             </ContentSwapper>
 
             <h3 id="fade-wait">Fade out, then fade in transition</h3>
-            <p>The <code>opacity</code> transition for <code>enter</code> animation is delayed until after
-              the <code>leave</code> transition completes. View the <a
+            <p>For the first paragraph the <code>opacity</code> transition for <code>enter</code> animation is delayed
+              until after the <code>leave</code> transition completes. View the <a
                 href="https://github.com/marnusw/react-css-transition-replace#fade-out-then-fade-in"
-                target="_blank">CSS</a>.</p>
+                target="_blank">CSS</a>.<br/>For the second paragraph both the enter and height transitions
+              are delayed.</p>
 
             <ContentSwapper transitionName="fade-wait" transitionEnterTimeout={1000} transitionLeaveTimeout={400}>
               <ContentLong key="long"/>
               <ContentShort key="short"/>
             </ContentSwapper>
 
+            <br/>
+
+            <ContentSwapper transitionName="fade-wait-delay" transitionEnterTimeout={1000} transitionLeaveTimeout={400}>
+              <ContentLong key="long"/>
+              <ContentShort key="short"/>
+            </ContentSwapper>
+
             <h3 id="carousel-swap">Carousel transition</h3>
             <p>The slide animation is realised with a 2D CSS <code>transform</code>. View the <a
               href="transitions.css" target="_blank">CSS source</a>. To ensure the entering/leaving