反应过渡小组滚动聊天

Question

在我的应用中，我有一个气泡，其中包含由redux控制的滚动文本。使用animate css库，我尝试使文本在输入时淡入并在文本更改时淡出。

现在我有这样的东西：

SpeechBubble.js

// I set up the animate component like this so that it's not static and reusable based on the prop I pass
const Animate = animations[this.props.animation];

<div className="speech-bubble">
  <Animate>
    <div>{speech.text}</div>
  </Animate>
</div>

动画是一个可变组件，在这种情况下，我的 FadeInUpOutDown 动画（我从上面的CSS库中获得了所有动画样式）：

const fadeClasses = {
  appearActive: 'fadeInUp-appear-active',
  exitActive: 'fadeOutDown-exit-active'
}

const FadeInUpOutDown = props => (
  <CSSTransition
    appear
    classNames={fadeClasses}
    in
    onExiting={() => console.log('yo')}
    timeout={750}
  >
    {props.children}
  </CSSTransition>
);

看着documentation的React Transition Group，我一生都无法弄清楚如何获得滚动文本。我的意思是，当我更改文本缩减程序的状态时，我希望旧文本以无缝的方式逐渐淡出，而新文本则全部以淡入淡出。现在，我的文字刚刚淡出。