Added an add/remove content section to the demo.

Author: marnusw

demo/assets/styles.css

@@ -1,5 +1,5 @@
 body {
-  padding-bottom: 100px;
+  padding-bottom: 300px;
 }
 
 .page-head {

demo/assets/transitions.css

@@ -6,15 +6,15 @@
 }
 .cross-fade-leave.cross-fade-leave-active {
   opacity: 0;
-  transition: opacity 1s ease-in;
+  transition: opacity 1s ease-in-out;
 }
 
 .cross-fade-enter {
   opacity: 0;
 }
 .cross-fade-enter.cross-fade-enter-active {
   opacity: 1;
-  transition: opacity 1s ease-in;
+  transition: opacity 1s ease-in-out;
 }
 
 .cross-fade-height {
@@ -67,3 +67,30 @@
 .carousel-swap-height {
   transition: height .3s ease-in-out;
 }
+
+
+/* Roll-up transition */
+
+.roll-up-leave {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+.roll-up-leave.roll-up-leave-active {
+  transform: translate(-100%, 0);
+  opacity: 0;
+  transition: opacity .8s ease-in-out, transform .8s ease-in-out;
+}
+
+.roll-up-enter {
+  transform: translate(-100%, 0);
+  opacity: 0;
+}
+.roll-up-enter.roll-up-enter-active {
+  transform: translate(0, 0);
+  opacity: 1;
+  transition: opacity .8s ease-in-out, transform .8s ease-in-out;
+}
+
+.roll-up-height {
+  transition: height .8s ease-in-out;
+}

demo/components/ContentAddRemove.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactCSSTransitionReplace from '../../src/ReactCSSTransitionReplace.jsx';
+
+
+class ContentAddRemove extends React.Component {
+
+  state = {added: false};
+
+  handleClick = () => {
+    this.setState({added: !this.state.added});
+  }
+
+  render() {
+    const { style = {} } = this.props;
+
+    style.cursor = 'pointer';
+
+    return (
+      <div style={style} onClick={this.handleClick}>
+        <a>Click to {this.state.added ? 'remove' : 'add'} content</a><br/>
+        <br/>
+        <ReactCSSTransitionReplace {...this.props} onClick={this.handleClick}>
+          {this.state.added ? this.props.children : null}
+        </ReactCSSTransitionReplace>
+      </div>
+    );
+  }
+}
+
+export default ContentAddRemove;

demo/components/Demo.jsx

@@ -3,6 +3,7 @@ import { Navbar, NavBrand, Nav, NavItem, Grid } from 'react-bootstrap';
 
 import PageHead from './PageHead.jsx';
 import ContentSwapper from './ContentSwapper.jsx';
+import ContentAddRemove from './ContentAddRemove.jsx';
 
 import ContentLong from './ContentLong.jsx';
 import ContentShort from './ContentShort.jsx';
@@ -40,7 +41,7 @@ class Demo extends React.Component {
             <h2>Examples</h2>
             <p className="text-danger"><em>Click any content to trigger the transition.</em></p>
 
-            <h3>Cross-fade transition</h3>
+            <h3 id="cross-fade">Cross-fade transition</h3>
             <p>The <code>opacity</code> transitions for <code>enter</code> and <code>leave</code> are started
               at the same time. View the <a
                 href="https://github.com/marnusw/react-css-transition-replace#cross-fading-two-components"
@@ -51,8 +52,8 @@ class Demo extends React.Component {
               <img key="img2" src="img/vista2.jpg" width="600" height="280"/>
             </ContentSwapper>
 
-            <h3>Fade out, then fade in transition</h3>
-            <p>The <code>opacity</code> transitions for <code>enter</code> animation is delayed until after
+            <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
                 href="https://github.com/marnusw/react-css-transition-replace#fade-out-then-fade-in"
                 target="_blank">CSS</a>.</p>
@@ -62,7 +63,7 @@ class Demo extends React.Component {
               <ContentShort key="short"/>
             </ContentSwapper>
 
-            <h3>Carousel transition</h3>
+            <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
               images are properly hidden the carousel width can be set directly on the container:
@@ -75,6 +76,17 @@ class Demo extends React.Component {
               <img key="img4" src="img/vista4.jpg" width="600" height="280"/>
             </ContentSwapper>
 
+            <h3 id="roll-up">Add/Remove Content</h3>
+            <p>The child component may be removed (i.e. <code>ReactCSSTransitionReplace</code> left with no children)
+              which will animate the <code>height</code> going to zero along with the <code>leave</code> transition.
+              A single child can subsequently be added again, triggering the inverse animation.
+              View the <a href="transitions.css" target="_blank">CSS source</a> of the `roll-up` transition.
+            </p>
+
+            <ContentAddRemove transitionName="roll-up" transitionEnterTimeout={800} transitionLeaveTimeout={800}>
+              <img key="img1" src="img/vista1.jpg" width="600" height="235"/>
+            </ContentAddRemove>
+
           </div>
         </Grid>
       </div>

demo/components/TimedSwapper.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactCSSTransitionReplace from '../../src/ReactCSSTransitionReplace.jsx';
+
+
+class ContentSwapper extends React.Component {
+
+  state = {
+    count: React.Children.count(this.props.children),
+    index: 0
+  };
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState({index: this.state.index + 1 >= this.state.count ? 0 : this.state.index + 1});
+    }, 4000);
+  }
+
+  render() {
+    const content = React.Children.toArray(this.props.children);
+
+    return (
+      <ReactCSSTransitionReplace {...this.props}>
+        {content[this.state.index]}
+      </ReactCSSTransitionReplace>
+    );
+  }
+}
+
+export default ContentSwapper;