Nested Animation Issues (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by alonbt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/react-transition-group@2.0.2/dist/react-transition-group.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.fade-enter,
.fade-appear,
.fade-exit {
  transition: all 500ms;
}

.fade-enter,
.fade-appear {
  opacity: 0;
}

.fade-enter-active,
.fade-appear-active {
  opacity: 1
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0
}

.scale-enter,
.scale-appear,
.scale-exit {
  transition: all 500ms;
}

.scale-enter,
.scale-appear {
  transform: scale(0);
}

.scale-enter-active,
.scale-appear-active {
  transform: scale(1);
}

.scale-exit {
  transform: scale(1);
}

.scale-exit-active {
  transform: scale(0);
}

JavaScript 1.7

let { CSSTransition, TransitionGroup } = ReactTransitionGroup

class Example extends React.Component {
	constructor(props, context) {
    super(props, context);
    this.state = { show: false, showNested: false };
  }
  
  toggle() {
  	this.setState({show: !this.state.show})
  }
  
  toggleNested() {
  	this.setState({showNested: !this.state.showNested})
  }
  
  render() {
    return (
      <div>
      <h3>Watch console to see console.logs</h3>
        <button onClick={() => this.toggle()}>
          Click to animate
        </button>
        <TransitionGroup>
           <Fade>{this.state.show && <div>I will fade</div>}</Fade>
        </TransitionGroup>
      </div>
     );
  }
};

class Fade extends React.Component {

  onEnter(node, isAppearing) {
    console.log('fade onEnter! node is', node, 'but why dont i see the appearing state?', isAppearing);
  }
  
    onEntering(node, isAppearing) {
    console.log('fade onEntering! node is', node, 'but why dont i see the appearing state?', isAppearing);
  }
  
  render() {

    return (
      <TransitionGroup>
        {React.Children.toArray(this.props.children).map((child, index) =>
          <CSSTransition
            key={index}
            enter={true}
            exit={true}
            appear={true}
            timeout={500}
            classNames="fade"
            onEntering={this.onEntering}
            onEnter={this.onEnter}
          >
            {child}
        </CSSTransition>
        )}
      </TransitionGroup>
    )
  }
};

ReactDOM.render(
  <Example />,
  document.getElementById('container')
);