反应过渡组滚动聊天

在我的应用程序中,我有一个由redux控制的滚动文本的语音气泡。使用 animate css 图书馆,我试图让文字淡入淡出时,它来了和淡出时,文字的变化。

现在我有这样的东西:

演讲泡泡.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>

是一个变量组件,在本例中 法德纽普顿 动画(我从上面的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过渡组,我一辈子都搞不懂如何获得滚动文本。我的意思是,当我改变文本缩减器的状态时,我希望旧文本在一个无缝的移动中淡出,而新文本在一个无缝的移动中淡出。现在我的文字只是淡入淡出。