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、 transition-behavior の一括指定プロパティです。
developer.mozilla.org

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

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

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

【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】
エウレカのPairsグローバル事業部エンジニアの山内です。 この記事は、eureka Advent Calendar 2017 13日目の記事です。 昨日は新卒エンジニア鈴木康文さんの「Goのフレームワーク“Revel”を触ってみた」でした。 これからGoをはじめてみようという方にはとても入っていきやすい内容です。...
medium.com

コメント