LoginSignup
2

More than 5 years have passed since last update.

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

Posted at

色々なサイトでよく見る一番上に戻るボタンのように、特定の条件を満たすとフェードインして別の条件でフェードアウトする要素を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で使うことを前提として考えたほうがよさそう。

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

解説

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

まとめ

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2