一、使用css3属性实现

基本思路是给dom添加类名，通过类名的变化，来实现样式的变化，从而实现动画效果。
比如，div的透明度变化：

class App extends Component {

  constructor(props){
    super(props)
    this.state = {
      show: true
    }
    this.handleClick = this.handleClick.bind(this)
  }

  render() {
    let show = this.state.show
    return (
      <Fragment>
        <div className={show ? 'show' : 'hide'}>Hello</div>
        <button onClick={this.handleClick}>Toggle</button>
      </Fragment>
    )
  }

  handleClick(){
    let show = this.state.show
    this.setState(() => ({show: !show}))
  }
}

上面代码通过改变show的值，来改变div的类名，这时再给css文件添加下面的样式，就可以实现按钮点击时，div显示和隐藏。

.show{
  opacity: 1;
  transition: all 1s;
}
.hide{
  opacity: 0;
  transition: all 1s;
}

使用animation实现动画是一样的套路，这里就不说了。

二、使用react-transition-group

react-transition-group是一个react的动画组件模块，需要安装后使用

• CSSTransition组件

<Fragment>
  <CSSTransition
      in = {show}
      timeout = {1000}
      classNames = 'fade'
      unmountOnExit
      onEntered={(el) => {el.style.color = 'red'}}
      appear = {true}
  >
  <div>Hello</div>
  </CSSTransition>
  <button onClick={this.handleClick}>Toggle</button>
</Fragment>

下面介绍属性含义：
in：切换状态时所用的值
timeout：延时
classNames：所应用样式的前缀
unmountOnExit：消失时移除组件
onEntered：进入动作完成后执行的函数
appear：刚加载时是否使用动画
css样式：

.fade-enter, .fade-appear{
  opacity: 0;
}
.fade-enter-active, .fade-appear-active{
  opacity: 1;
  transition: all 1s;
}
.fade-enter-done{
  opacity: 1;
  /* color: red; */
}
.fade-exit{
  opacity: 1;
}
.fade-exit-active{
  opacity: 0;
  transition: all 1s;
}
.fade-exit-done{
  opacity: 0;
}

• TransitionGroup组件

<Fragment>
  <TransitionGroup>
  {
    this.state.list.map((curValue, index) => {
      return (
        <CSSTransition
            timeout = {1000}
            classNames = 'fade'
            unmountOnExit
            onEntered={(el) => {el.style.color = 'red'}}
            appear = {true}
            key = {index}
        >
          <div>Hello</div>
        </CSSTransition>
      ) 
    })
  }
  </TransitionGroup>
  <button onClick={this.handleClick}>addItem</button>
</Fragment>

解释：
TransitionGroup表明里面的dom都要参与动画，而CSSTransition控制单个的动画效果，这时，并不需要in属性；因为添加一个item就是淡入一个元素，不需要标识。