非表示時にfocus出来ないフェードイン・アウト要素をCSSで実装する

  • 2
    Like
  • 0
    Comment
More than 1 year has passed since last update.

色々なサイトでよく見る一番上に戻るボタンのように、特定の条件を満たすとフェードインして別の条件でフェードアウトする要素をCSSで簡単に実装する。

背景

前述のようなコンポーネントを実装しようとすると、opacityをいじるだけではクリックできてしまうし、transitionkeyframesにはdisplayが指定できないしで、いい方法が見つからず毎回苦戦していた。

いつもやってたのはkeyframesheightを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:absoluteposition:fixedで使うことを前提として考えたほうがよさそう。

例:ある程度スクロールしたら一番上に戻るボタンを表示する

https://jsfiddle.net/81jndu1t/2/

解説

調べてみたらいくつか見つかった。どうやらvisibilityプロパティはtransitionでアニメーションさせようとすると、0sの時点ではhiddenで、それ以降の変化中の値は全てvisibleとみなすようだ。

まとめ

  • フェードイン・アウトはvisibilityopacityの組み合わせで実装できる
  • visibilitytransitionで利用できる
  • visibility:hiddenはレイアウト的に存在しているのでposition:absoluteposition:fixedで使う