Reactでフェードイン・アウトを実装
Reactで通知バーなどをフェードイン/アウトさせるアニメーションについてです。
この場合、CSSのtransitionプロパティを使う方法がシンプルかと思います。下のコード例では、isOpenのフラグによってスタイルを切り替え、フェードイン/アウトのアニメーションを実現します。
<div style={{ transition: '1s', opacity: isOpen ? 1 : 0, width: isOpen ? '60vw' : 0, }} />
transitionは、スタイルで指定した2つの値を行き来する時間を設定できます。transitionの値を変更すると、何秒間かけてフェードイン/アウトするかを設定できます。詳しくは下記公式で。
transition - CSS: カスケーディングスタイルシート | MDN
transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay、 transi...
また、下記のようにisOpenフラグの切り替えを設定すれば、何秒後にフェードアウトすると言った設定もできます。
setTimeout(() => { this.setState({isOpen: false}) }, 3000)
例ではthis.stateを使っていますが、Reduxを導入している場合はアクションクリエイターを指定するなど適宜読み替えてください。こちらを参考にさせていただきました↓
【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】
エウレカのPairsグローバル事業部エンジニアの山内です。 この記事は、eureka Advent Calendar 2017 13日目の記事です。 昨日は新卒エンジニア鈴木康文さんの「Goのフレームワーク“Revel”を触ってみた」でした...
コメント