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

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

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

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

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

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

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

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

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

コメント