React CSSTransitionGroup Example with ES6+JSX

React CSSTransitionGroup Example with ES6+JSX

by Danny Michaelis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.container {
    text-align: center;
}

.awesome {
  position: absolute;
  right: 44%;
  width: 50px;
  text-align: center;
}
button {
  position: absolute;
  top: 50px;
  right: 43%;
}

.awesome1 {
  color: blue;
}
.awesome2 {
  color: red;
}

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}

JavaScript 1.7

const CSSTransitionGroup = React.addons.CSSTransitionGroup;

class Container extends React.Component {

  constructor(props) {
    super(props);
    this.state = { num: 0 };
  }

  render(){
    let AwesomeNumber = <AwesomeNumber1 key={this.state.num} num={this.state.num} />;
    if (this.state.num % 2 === 1) {
      AwesomeNumber = <AwesomeNumber2 key={this.state.num} num={this.state.num} />;
    }

    return (
      <div className='container'>
        <CSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
        {AwesomeNumber}
        </CSSTransitionGroup>
        <button onClick={this.handleClick.bind(this)}>Click Me!</button>
      </div>
    )
  }

  handleClick(e){
    this.setState({
      num: this.state.num + 1
    });
  }
}

class AwesomeNumber1 extends React.Component {
  render(){
    return (
    	<div className='awesome'>
	      <p className='awesome1'>{this.props.num}</p>
      </div>
    );
  }
}
AwesomeNumber1.propTypes = {
  num: React.PropTypes.number.isRequired
};
class AwesomeNumber2 extends React.Component {
  render(){
    return (
    	<div className='awesome'>
	      <p className='awesome2'>{this.props.num}</p>
      </div>
  );
  }
}
AwesomeNumber2.propTypes = {
  num: React.PropTypes.number.isRequired
};

React.render(<Container />, document.getElementById('container'));