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;
}
.background-enter {
  
}
.background-enter.background-enter-active {
  
  transition: transform 1000ms ease-in-out;
}

JavaScript 1.7

var 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 * 10}px`,
      height: "70px",
      width: "70px",
      background: "red",
      border: "4px solid white",
		  borderRadius: "50%",
      transform: "translate(100px)"
    }} 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="background" 
          transitionEnterTimeout={1000}
          >
	        <Dot left={this.state.num} key={this.state.num}/>
        </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'));