Revised demo implementation for handling image children.

Author: marnusw

.npmignore

@@ -1 +1,2 @@
-# Override .gitignore so `lib` will be published.
+node_modules
+demo

demo/assets/app.js

@@ -1,6 +1,9 @@
 h2 {
   margin-top: 50px;
 }
+body {
+  padding-bottom: 100px;
+}
 
 
 /* Cross-fade transition */
@@ -50,3 +53,26 @@ h2 {
 
 
 /* Carousel-like transition */
+
+.carousel {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  width: 100%;
+}
+
+.carousel-swap-leave {
+  transition: transform .3s ease-in-out;
+  transform: translate(0, 0);
+}
+.carousel-swap-leave-active {
+  transform: translate(-100%, 0);
+}
+
+.carousel-swap-enter {
+  transition: transform .3s ease-in-out;
+  transform: translate(100%, 0);
+}
+.carousel-swap-enter-active {
+  transform: translate(0, 0);
+}

demo/assets/img/vista1.jpg

@@ -1,27 +1,26 @@
 import React from 'react';
 import ReactCSSTransitionReplace from '../../src/ReactCSSTransitionReplace.jsx';
 
-import ContentLong from './ContentLong.jsx';
-import ContentShort from './ContentShort.jsx';
-
 
 class ContentSwapper extends React.Component {
 
   static propTypes = {
-    longContent: React.PropTypes.bool
+    swapped: React.PropTypes.bool
   };
 
-  state = {longContent: this.props.longContent};
+  state = {swapped: this.props.swapped};
 
   handleClick = () => {
-    this.setState({longContent: !this.state.longContent});
+    this.setState({swapped: !this.state.swapped});
   }
 
   render() {
+    const content = React.Children.toArray(this.props.children);
+
     return (
       <div onClick={this.handleClick} style={{cursor: 'pointer'}}>
         <ReactCSSTransitionReplace {...this.props}>
-          {this.state.longContent ? <ContentLong key="long" /> : <ContentShort key="short" />}
+          {this.state.swapped ? content[1] : content[0]}
         </ReactCSSTransitionReplace>
       </div>
     );

demo/assets/img/vista2.jpg

@@ -3,39 +3,68 @@ import { Navbar, NavBrand, Nav, NavItem, Grid } from 'react-bootstrap';
 
 import ContentSwapper from './ContentSwapper.jsx';
 
+import ContentLong from './ContentLong.jsx';
+import ContentShort from './ContentShort.jsx';
 
-function Demo() {
-  const transitionProps = {
-    transitionEnterTimeout: 500,
-    transitionLeaveTimeout: 300,
-    transitionHeight: false
-  };
-
-  return (
-    <div>
-      <Navbar>
-        <NavBrand>ReactCSSTransitionReplace</NavBrand>
-        <Nav right>
-          <NavItem href="https://github.com/marnusw/react-css-transition-replace" target="_blank">GitHub</NavItem>
-        </Nav>
-      </Navbar>
-
-      <Grid>
-        <br/>
-        <p className="text-danger"><em>Click any content to trigger the transition.</em></p>
-
-        <h2>Cross-fade transition</h2>
-        <ContentSwapper {...transitionProps} transitionName="cross-fade"/>
-
-        <h2>Fade out, then fade in transition</h2>
-        <ContentSwapper {...transitionProps} transitionName="wait-fade"/>
-
-        <h2>Carousel-like transition</h2>
-        <ContentSwapper {...transitionProps} transitionName="carousel"/>
-
-      </Grid>
-    </div>
-  );
+class Demo extends React.Component {
+
+  componentDidMount() {
+    [
+      '/img/vista1.jpg',
+      '/img/vista2.jpg',
+      '/img/vista3.jpg',
+      '/img/vista4.jpg'
+    ].forEach(src => {
+      const img = new window.Image();
+      img.src = src;
+    });
+  }
+
+  render() {
+    const transitionProps = {
+      transitionEnterTimeout: 500,
+      transitionLeaveTimeout: 300,
+      transitionHeight: false
+    };
+
+    return (
+      <div>
+        <Navbar>
+          <NavBrand>ReactCSSTransitionReplace</NavBrand>
+          <Nav right>
+            <NavItem href="https://github.com/marnusw/react-css-transition-replace" target="_blank">GitHub</NavItem>
+          </Nav>
+        </Navbar>
+
+        <Grid>
+          <br/>
+          <p className="text-danger"><em>Click any content to trigger the transition.</em></p>
+
+          <h2>Cross-fade transition</h2>
+          <ContentSwapper {...transitionProps} transitionName="cross-fade">
+            <img key="img1" src="/img/vista1.jpg"/>
+            <img key="img2" src="/img/vista2.jpg"/>
+          </ContentSwapper>
+
+          <h2>Fade out, then fade in transition</h2>
+          <ContentSwapper {...transitionProps} transitionName="wait-fade">
+            <ContentShort key="short"/>
+            <ContentLong key="long"/>
+          </ContentSwapper>
+
+          <h2>Carousel-like transition</h2>
+
+          <div style={{width: 600}}>
+            <ContentSwapper {...transitionProps} transitionName="carousel-swap" className="carousel">
+              <img key="img3" src="/img/vista3.jpg"/>
+              <img key="img4" src="/img/vista4.jpg"/>
+            </ContentSwapper>
+          </div>
+
+        </Grid>
+      </div>
+    );
+  }
 }
 
 export default Demo;