Replace class mimics ReactTransitionGroup.

Author: marnusw

demo/assets/app.js

@@ -12,19 +12,19 @@ body {
 }
 .cross-fade-leave.cross-fade-leave-active {
   opacity: 0;
-  transition: opacity .2s ease-in;
+  transition: opacity 1s ease-in;
 }
 
 .cross-fade-enter {
   opacity: 0;
 }
 .cross-fade-enter.cross-fade-enter-active {
   opacity: 1;
-  transition: opacity .2s ease-in;
+  transition: opacity 1s ease-in;
 }
 
 .cross-fade-height {
-  transition: height .15s ease-in-out;
+  transition: height 1s ease-in-out;
 }
 
 
@@ -55,8 +55,6 @@ body {
 /* Carousel-like transition */
 
 .carousel {
-  position: relative;
-  overflow: hidden;
   display: block;
   width: 100%;
 }

demo/assets/transitions.css

@@ -1,9 +1,9 @@
 import React from 'react';
 
 
-function ContentLong() {
+function ContentLong(props) {
   return (
-    <div>
+    <div {...props}>
       <b>Some longer content</b>
       <p>
         Suspendisse non ante dui. Phasellus tempor sem non cursus feugiat. Pellentesque quis justo neque. Proin est

demo/components/ContentLong.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 
-function ContentShort() {
+function ContentShort(props) {
   return (
-    <div>
+    <div {...props}>
       <b>Some shorter content</b>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar pharetra magna ac rhoncus. Pellentesque

demo/components/ContentShort.jsx

@@ -15,9 +15,9 @@ class Demo extends React.Component {
       '/img/vista3.jpg',
       '/img/vista4.jpg'
     ].forEach(src => {
-      const img = new window.Image();
-      img.src = src;
-    });
+        const img = new window.Image();
+        img.src = src;
+      });
   }
 
   render() {
@@ -41,15 +41,17 @@ 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 {...transitionProps} transitionName="cross-fade">
+          <ContentSwapper transitionName="cross-fade" transitionHeight={false}
+                          transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
             <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"/>
+          <ContentSwapper transitionName="cross-fade" transitionHeight={false}
+                          transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
             <ContentLong key="long"/>
+            <ContentShort key="short"/>
           </ContentSwapper>
 
           <h2>Carousel-like transition</h2>

demo/components/Demo.jsx

@@ -9,7 +9,9 @@ import ReactDOM from 'react-dom';
 import objectAssign from 'react/lib/Object.assign';
 import ReactTransitionGroup from 'react-addons-transition-group';
 
-import ReplaceChildComponent from './ReactCSSTransitionReplaceChild';
+import emptyFunction from 'react/node_modules/fbjs/lib/emptyFunction';
+
+import ReplaceChildComponent from 'react/lib/ReactCSSTransitionGroupChild';
 
 const reactCSSTransitionReplaceChild = React.createFactory(ReplaceChildComponent);
 
@@ -53,7 +55,8 @@ export default class ReactCSSTransitionReplace extends React.Component {
     transitionAppear: false,
     transitionEnter: true,
     transitionLeave: true,
-    transitionHeight: true
+    transitionHeight: true,
+    component: 'span'
   };
 
   state = {
@@ -73,58 +76,23 @@ export default class ReactCSSTransitionReplace extends React.Component {
       });
     }
 
-    const transitionHeight = nextProps.transitionHeight;
-    const currentHeight = transitionHeight ? ReactDOM.findDOMNode(this.refs.container).offsetHeight : 'auto';
-
-    // The child was removed, so animate out.
-    if (!nextChild) {
-      return this.setState({
-        height: currentHeight,
-        currentChild: null
-      }, () => transitionHeight && this.setState({height: 0}));
-    }
-
-    // The child was replaced or added, setting a nextChild will eventually animate it in.
     this.setState({
-      height: currentHeight,
-      currentChild: null,
       nextChild
     });
   }
 
   componentDidUpdate() {
-    const nextChild = this.refs.nextChild;
-
-    // If there is a next child we'll be animating it in soon, so change to its height.
-    if (nextChild && nextChild.offsetHeight !== this.state.height) {
-      this.setState({
-        height: nextChild.offsetHeight
-      });
-    }
-  }
-
-  _childLeft = () => {
-    // Swap the children after the current child left.
-    this.setState({
-      currentChild: this.state.nextChild,
-      nextChild: null
-    });
-  }
-
-  _childEntered = () => {
-    // The height animation would have finished, so switch back to auto.
-    if (this.props.transitionHeight) {
-      this.setState({
-        height: 'auto'
-      });
+    if (this.state.nextChild) {
+      this.enterNext();
+      this.leaveCurrent();
     }
   }
 
-  _wrapChild = (child) => {
+  _wrapChild = (child, moreProps) => {
     // We need to provide this childFactory so that
     // ReactCSSTransitionReplaceChild can receive updates to name,
     // enter, and leave while it is leaving.
-    return reactCSSTransitionReplaceChild({
+    return reactCSSTransitionReplaceChild(objectAssign({
       name: this.props.transitionName,
       appear: this.props.transitionAppear,
       enter: this.props.transitionEnter,
@@ -134,43 +102,58 @@ export default class ReactCSSTransitionReplace extends React.Component {
       leaveTimeout: this.props.transitionLeaveTimeout,
       onEntered: this._childEntered,
       onLeft: this._childLeft
-    }, child);
+    }, moreProps), child);
   }
 
-  render() {
-    let { style, className = '' } = this.props;
-    let nextChildShadow;
-
-    if (this.props.transitionHeight) {
-      if (this.state.nextChild) {
-        nextChildShadow = (
-          <div ref="nextChild" style={{position: 'absolute', visibility: 'hidden'}}>
-            {this.state.nextChild}
-          </div>
-        );
-      }
+  enterNext() {
+    this.refs.next.componentWillEnter(this._handleDoneEntering);
+  }
 
-      const animatingHeight = this.state.height !== 'auto';
+  _handleDoneEntering = () => {
+    this.setState({
+      currentChild: this.state.nextChild,
+      nextChild: null
+    });
+  }
 
-      if (animatingHeight) {
-        className = `${className} ${this.props.transitionName}-height`;
-      }
+  leaveCurrent() {
+    this.refs.curr.componentWillLeave(this._handleDoneLeaving);
+  }
+
+  render() {
+    let { currentChild, nextChild } = this.state;
+    let containerProps = this.props;
+    const childrenToRender = [];
+
+    if (currentChild) {
+      childrenToRender.push(this._wrapChild(currentChild, {
+        ref: 'curr', key: 'curr'
+      }));
+    }
 
-      style = objectAssign(style || {}, {
-        overflow: animatingHeight ? 'hidden' : 'visible',
-        height: this.state.height,
+    if (nextChild) {
+      const style = objectAssign({}, this.props.style, {
+        position: 'relative',
+        overflow: 'hidden',
         display: 'block'
       });
+
+      containerProps = objectAssign({}, this.props, {style});
+
+      const nextChildStyle = objectAssign({}, nextChild.props.style, {
+        position: 'absolute',
+        left: 0,
+        top: 0
+      });
+
+      childrenToRender.push(
+        React.createElement('span', {
+          style: nextChildStyle,
+          key: 'next'
+        }, this._wrapChild(nextChild, {ref: 'next'}))
+      );
     }
 
-    return (
-      <span>
-        {nextChildShadow}
-        <ReactTransitionGroup ref="container" {...this.props} childFactory={this._wrapChild}
-                              style={style} className={className}>
-          {this.state.currentChild}
-        </ReactTransitionGroup>
-      </span>
-    );
+    return React.createElement(this.props.component, containerProps, childrenToRender);
   }
 }