2

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

4

0 に答える 0