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

色々なサイトでよく見る一番上に戻るボタンのように、特定の条件を満たすとフェードインして別の条件でフェードアウトする要素を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プロパティのアニメーション時の振る舞い
• CSS3 transitions using visibility and delay

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

まとめ

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