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

スポンサーリンク

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

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

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

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

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

transition
CSS の transition プロパティは、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティです。

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

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

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

https://medium.com/eureka-engineering/html-css-%E3%81%9F%E3%81%8B%E3%81%8C%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3-%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6%E3%83%88%E3%81%99%E3%82%8B%E3%81%A0%E3%81%91%E3%81%AE%E6%8C%99%E5%8B%95%E3%81%AB%E5%85%A8%E5%8A%9B%E3%81%A7%E5%8F%96%E3%82%8A%E7%B5%84%E3%82%93%E3%81%A0%E7%B5%90%E6%9E%9C-%E6%9C%80%E5%BC%B7%E3%81%AEcss%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%9F%E8%A9%B1-%E6%9C%80%E5%BC%B7-881152c4ff13

コメント