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"></div>

CSS

.container {
    text-align: center;
}

button {
  position: absolute;
  top: 50px;
  right: 43%;
}

.awesome1 {
    text-align: center;
  color: blue;
}
.example-enter {
 transition: opacity 1s ease-in;
 transform: translate( 100px );
}
.example-enter.example-enter-active {
  transition: opacity 1s ease-in;
  transform: translate( 100px );
}

JavaScript 1.7

const CSSTransitionGroup = React.addons.CSSTransitionGroup;

class Dot extends React.Component {
	constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
  	this.setState( { count: this.state.count + 1 } );
  }
  render() {
  	return ( <div style={{
    	position: 'absolute',
      left: `${this.props.left}px`,
      height: "70px",
      width: "70px",
      background: "red",
      border: "4px solid white",
		  borderRadius: "50%",
    }} onClick={this.handleClick} animationEnd={ () => console.log('END') } transitionEnd={ () => console.log('END') }>
    	<AwesomeNumber1 num={this.state.count} />
    </div> )
  }
}

class Container extends React.Component {

  constructor(props) {
    super(props);
    this.state = { num: 0 };
    this.handleClick = this.handleClick.bind(this)
  }
  
  handleClick(e){
      this.setState({
        num: this.state.num + 1
      });
	}
  
  render(){
    return (
      <div className='container'>
        <CSSTransitionGroup 
        	transitionName="example" 
          transitionEnterTimeout={1000}
          transitionLeaveTimeout={300}>
	        <Dot left={0} key={1}/>
        </CSSTransitionGroup>
        <AwesomeNumber1 key={this.state.num} num={this.state.num} />
        <button onClick={this.handleClick}>Click Me!</button>        
      </div>
    )
  }

  
}

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

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