Add third image to the carousel animation.

Author: marnusw

demo/assets/transitions.css

@@ -49,23 +49,23 @@
 /* Carousel-like transition */
 
 .carousel-swap-leave {
-  transition: transform .3s ease-in-out;
+  transition: transform 2s ease-in-out;
   transform: translate(0, 0);
 }
 .carousel-swap-leave-active {
   transform: translate(-100%, 0);
 }
 
 .carousel-swap-enter {
-  transition: transform .3s ease-in-out;
+  transition: transform 2s ease-in-out;
   transform: translate(100%, 0);
 }
 .carousel-swap-enter-active {
   transform: translate(0, 0);
 }
 
 .carousel-swap-height {
-  transition: height .3s ease-in-out;
+  transition: height 2s ease-in-out;
 }
 
 

demo/components/ContentSwapper.jsx

@@ -4,10 +4,11 @@ import ReactCSSTransitionReplace from '../../src/ReactCSSTransitionReplace.jsx'
 
 class ContentSwapper extends React.Component {
 
-  state = {swapped: false}
+  state = {index: 0}
 
   handleClick = () => {
-    this.setState({swapped: !this.state.swapped})
+    const index = this.state.index + 1
+    this.setState({index: index >= React.Children.count(this.props.children) ? 0 : index})
   }
 
   render() {
@@ -18,7 +19,7 @@ class ContentSwapper extends React.Component {
 
     return (
       <ReactCSSTransitionReplace {...this.props} style={style} onClick={this.handleClick}>
-        {this.state.swapped ? content[1] : content[0]}
+        {content[this.state.index]}
       </ReactCSSTransitionReplace>
     )
   }

demo/components/Demo.jsx

@@ -71,10 +71,11 @@ class Demo extends React.Component {
               <code>{'<ReactCSSTransitionReplace transitionName="carousel-swap" /*...*/  style={{width: 600}}>'}</code>.
             </p>
 
-            <ContentSwapper transitionName="carousel-swap" transitionEnterTimeout={500} transitionLeaveTimeout={500}
+            <ContentSwapper transitionName="carousel-swap" transitionEnterTimeout={2000} transitionLeaveTimeout={2000}
                             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"/>
+              <img key="img1" src="img/vista3.jpg" width="600" height="255"/>
+              <img key="img2" src="img/vista4.jpg" width="600" height="280"/>
+              <img key="img3" src="img/vista2.jpg" width="600" height="290"/>
             </ContentSwapper>
 
             <h3 id="roll-up">Add/Remove Content</h3>