css - React 过渡组滚动聊天

Question

在我的应用程序中，我有一个语音气泡，其中包含由 redux 控制的滚动文本。使用动画 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>

Animate是一个可变组件，在本例中是我的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>
);

查看 React Transition Group的文档，我一生都无法弄清楚如何获取滚动文本。我的意思是，当我改变我的文本缩减器的状态时，我希望旧文本淡出，新文本在一个无缝的动作中全部淡出。现在我的文字刚刚淡出。

标签： cssreactjsreact-transition-group