【CSS】Animationで "display:none" が効かない時は、opacityと「visibility:hidden;」を併用して使う！

hoge

CSS Animation では「display:none」が効かないから、opacityでフェードアウト・フェードインするのは良くある。

ただ、例えばそれがボタン要素やinput要素やリンクアンカー要素（a）だったりすると、画面から消えはするけど、実際にはその場所に存在しているので（ステルスなので）、うっかりそこでマウスやタップをするとイベントが発生してしまう事がある。

 

そこで思い出して欲しい。

「visibility:hidden;」の存在を！

 

なんと、visibility属性ならアニメーションが効いちゃうのですねぇ。

（注：ただし、ゆっくりフェードインフェードアウト的な働きはしない様子。そのためopacityとの併用が必須。）

 

もちろん、hiddenした時にボタン要素の場所を押しても、イベントが発生することはない。

 

 

サンプル

 

要素「.target」をマウスホバーしたら、画面からフェードアウトで消える。

.target {
  opacity: 1;
  visibility: visible;
  transition: all 0.5s;
}

.target:hover {
  opacity: 0;
  visibility: hidden;
}
opacityで画面上での表示非表示を行い、
visibilityで該当要素内のイベントの活性非活性を行う。

 

 

注意点

 

★「display:none」は、消えたら要素の高さは無くなる。
　「visibility:hidden」は、消えても要素の高さが保持されたままとなる。

★visibilityは描画に負担がかかるので、必要最小限に留めること。
　infinite設定などで無限ループするようなアニメーションには向かない。

 

visibilityは、普段は "display:none" に押されて影の薄い子だけど、やる時はやる子なんです。

 

displayもそうだけど、「z-index:1」と「z-index:-1」をアニメーションで行き来できるようになればいいなぁ。