問題タブ [react-transition-group]

私のアプリには、redux によって制御されるローリング テキストを持つ吹き出しがあります。アニメーションCSSライブラリを使用して、テキストが入ってくるとフェードインし、テキストが変更されるとフェードアウトしようとしています。

今、私はこのようなものを持っています:

SpeechBubble.js

Animateは可変コンポーネントで、この場合は私のFadeInUpOutDownアニメーションです (上記の CSS ライブラリからすべてのアニメーション スタイルを取得します)。

React Transition Groupのドキュメントを見ると、私の人生では、ローリング テキストを取得する方法がわかりません。つまり、テキスト レデューサーの状態を変更するときに、古いテキストをフェード アウトさせ、新しいテキストを 1 回のシームレスな動きでフェード アップさせたいということです。現在、私のテキストはフェードインしています。

プログレス バー アニメーションの jQuery の例を次に示します。jQueryを使わずにReactjsでこの機能が欲しいです。この機能を実装する方法。