色々なサイトでよく見る一番上に戻るボタンのように、特定の条件を満たすとフェードインして別の条件でフェードアウトする要素をCSSで簡単に実装する。
背景
前述のようなコンポーネントを実装しようとすると、opacity
をいじるだけではクリックできてしまうし、transition
やkeyframes
にはdisplay
が指定できないしで、いい方法が見つからず毎回苦戦していた。
いつもやってたのはkeyframes
でheight
を0から任意の数値まで0%,1%,100%
のタイミングでアニメーションさせる方法だったが、煩雑なCSSになってしまいつらかった。
そんなときものすごくシンプルにCSSで書くことが出来る方法を学んだので残しておきます。
実装方法
.hoge {
visibility: hidden;
opacity: 0;
transition: 1s visibility linear, 1s opacity linear;
}
.hoge.show {
visibility: visible;
opacity: 1;
}
ただし、visibility:hidden
はfocus出来ないがレイアウト的には存在する要素となるため、position:absolute
やposition:fixed
で使うことを前提として考えたほうがよさそう。
例:ある程度スクロールしたら一番上に戻るボタンを表示する
解説
調べてみたらいくつか見つかった。どうやらvisibility
プロパティはtransition
でアニメーションさせようとすると、0sの時点ではhidden
で、それ以降の変化中の値は全てvisible
とみなすようだ。
まとめ
- フェードイン・アウトは
visibility
とopacity
の組み合わせで実装できる -
visibility
はtransition
で利用できる -
visibility:hidden
はレイアウト的に存在しているのでposition:absolute
やposition:fixed
で使う