local styles transition group

testThing.js

import React, {PropTypes} from 'react';
import TransitionGroup from 'react-addons-css-transition-group';
import styles from './testThing.scss';

function randomItem() {
  return {
    name: Array(Math.floor(Math.random() * 15)).join('a'),
    key: Math.random()
  }
}

class TestThing extends React.Component {
  static defaultProps = {
    
  };

  constructor() {
    super();
    this.state = {
      items: [1,1,1].map(randomItem)
    }
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({
        items: [...this.state.items, randomItem()]
      })
    }, 5000)
  }

  renderItems() {
    return this.state.items.map(item => <div key={item.key}>{item.name}</div>)
  }

  render() {
    console.log('testThing.js', this.props, this.state);
    const {...props} = this.props;

    return (
      // <div {...props} className={styles.base}>
      <TransitionGroup 
        transitionName={styles} 
        transitionAppear={true}
        transitionEnterTimeout={1000} 
        transitionLeaveTimeout={1000}
      >
        {this.renderItems()}
      </TransitionGroup>
    )
  }
}

export default TestThing;

testThing.scss

.enter {
  opacity: 0.01;
  transition: opacity 1.5s ease-out;
}
.enter.enterActive {
  opacity: 1;
}
.leave {
  opacity: 1;
}
.leave.leaveActive {
  opacity: 0.01;
}
.appear {
  transition: transform 1.5s ease-out;
  transform: translateX(500px);
}
.appear.appearActive {
  transform: translateX(0px);
}