使用React transition group怎么实现一个组件离开时的动画

#1

我想实现一个Toast组件

const Toast = (props) => (
  <CSSTransitionGroup
  transitionName="toast"
  transitionAppear={true}
  transitionEnterTimeout={500}
  transitionAppearTimeout={500}
  transitionLeaveTimeout={3500}
  transitionEnter={true}
  transitionLeave={true}>
  <div className="toast" key={this.props.text}>{this.props.text}</div>
</CSSTransitionGroup>
)

这是对应的css

.toast-appear {
  transform: translate(-50%, -30px);
  opacity: 0.01;
}

.toast-appear.toast-appear-active {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: all .2s ease-in;
}

.toast-leave {
  opacity: 1;
  transform: translate(-50%, 0);
  background: #f00;
}
.toast-leave.toast-leave-active {
  opacity: 0.01;
  transform: translate(-50%, -30px);
  transition: all .5s ease-in;
}

现在的问题是，组件在销毁的前，不会产生动画，是我使用的姿势不对吗？？具体需要怎样操作，才能在组件unmount的时候触发leave动画？

#2

enter：新路由进入的动画。
leave：旧路由离开的动画。