react-transition-group不在更改元素上设置动画

Question

所以我只需要一个简单的淡入淡出过渡，我的<Quote/>组件中就有以下代码：

     <TransitionGroup className="example">
        <CSSTransition
          key={2}
          classNames="example"
          timeout={{ enter: 500, exit: 300 }}
        >
          <span>{this.props.quote}</span>
        </CSSTransition>
      </TransitionGroup>

现在{this.props.quote}是<Quote quote={this.state.quote}/>的变化文字

每次单击下一个按钮时，都会生成新的<Quote/>，并且确实如此，报价生成器正在工作，并且文本正在更改。

我的CSS也是：

.example-enter {
  opacity: 0;
  transition: 0.3s all ease;
}
.example-enter-active {
  opacity: 1;
  transition: 0.3s all ease;
}

.example-exit {
  opacity: 1;
  transition: 0.3s all ease;
}
.example-exit-active {
  opacity: 0;
  transition: 0.3s all ease;
}

文本正在更改，但没有动画，：（。