2
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

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

色々なサイトでよく見る一番上に戻るボタンのように、特定の条件を満たすとフェードインして別の条件でフェードアウトする要素を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で使う
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?