Demo makes the advantage of use with content of different heights apparent.

Author: marnusw

demo/assets/img/vista1.jpg

@@ -35,7 +35,7 @@ body {
 }
 .fade-wait-leave.fade-wait-leave-active {
   opacity: 0;
-  transition: opacity .5s ease-in;
+  transition: opacity .4s ease-in;
 }
 
 .fade-wait-enter {
@@ -44,7 +44,7 @@ body {
 .fade-wait-enter.fade-wait-enter-active {
   opacity: 1;
   /* Delay the enter animation until the leave completes */
-  transition: opacity .5s ease-in .5s;
+  transition: opacity .4s ease-in .6s;
 }
 
 .fade-wait-height {

demo/assets/img/vista3.jpg

@@ -37,23 +37,21 @@ class Demo extends React.Component {
           <p className="text-danger"><em>Click any content to trigger the transition.</em></p>
 
           <h2>Cross-fade transition</h2>
-          <ContentSwapper transitionName="cross-fade" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}
-                          transitionHeight={false}>
-            <img key="img1" src="/img/vista1.jpg" width="600" height="280"/>
+          <ContentSwapper transitionName="cross-fade" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
+            <img key="img1" src="/img/vista1.jpg" width="600" height="235"/>
             <img key="img2" src="/img/vista2.jpg" width="600" height="280"/>
           </ContentSwapper>
 
           <h2>Fade out, then fade in transition</h2>
-          <ContentSwapper transitionName="fade-wait" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
+          <ContentSwapper transitionName="fade-wait" transitionEnterTimeout={1000} transitionLeaveTimeout={400}>
             <ContentLong key="long"/>
             <ContentShort key="short"/>
           </ContentSwapper>
 
           <h2>Carousel transition</h2>
-          <ContentSwapper style={{width: 600}}
-                          transitionName="carousel-swap" transitionEnterTimeout={500} transitionLeaveTimeout={500}
-                          transitionHeight={false}>
-            <img key="img3" src="/img/vista3.jpg" width="600" height="280"/>
+          <ContentSwapper transitionName="carousel-swap" transitionEnterTimeout={500} transitionLeaveTimeout={500}
+                          style={{width: 600}}>
+            <img key="img3" src="/img/vista3.jpg" width="600" height="255"/>
             <img key="img4" src="/img/vista4.jpg" width="600" height="280"/>
           </ContentSwapper>