Reactでフェードイン/アウトのアニメーション

Reactでフェードイン・アウトを実装

Reactで通知バーなどをフェードイン/アウトさせるアニメーションについてです。

この場合、CSSのtransitionプロパティを使う方法がシンプルかと思います。下のコード例では、isOpenのフラグによってスタイルを切り替え、フェードイン/アウトのアニメーションを実現します。

<div
  style={{
    transition: '1s',
    opacity: isOpen ? 1 : 0,
    width: isOpen ? '60vw' : 0,
  }}
/>

transitionは、スタイルで指定した２つの値を行き来する時間を設定できます。transitionの値を変更すると、何秒間かけてフェードイン/アウトするかを設定できます。詳しくは下記公式で。

transition - CSS | MDN

transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay、 transi...

developer.mozilla.org

また、下記のようにisOpenフラグの切り替えを設定すれば、何秒後にフェードアウトすると言った設定もできます。

setTimeout(() => { this.setState({isOpen: false}) }, 3000)

例ではthis.stateを使っていますが、Reduxを導入している場合はアクションクリエイターを指定するなど適宜読み替えてください。こちらを参考にさせていただきました↓

Just a moment...

medium.com