React Transition Group Rolling Chat

Question

In my app I have a speech bubble that has rolling text controlled by redux. Using the animate css library, I am trying to have the text fade in up when it comes in and fade out down when the text changes.

Right now I have something like this:

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 is a variable component, in this case my FadeInUpOutDown animation (I get all the animation styles from the CSS library above):

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>
);

Looking at the documentation for React Transition Group I can't, for the life of me, figure out how to get a rolling text. By that I mean, when I change the state of my text reducer, I want the old text to fade out down and the new text to fade up in all in one seamless move. Right now my text just fades in up.