備忘録 display:noneの代替

display:none;は要素をまるごと消してくれる。具体的には高さや幅を維持せず本当に非表示にする。

visibility:hidden;は要素の高さや幅を維持したまま消してくれる。

visibility:hidden;

width:0;

height:0;

でdisplay:none;風のことができる。

visibility:hidden;の高さと幅を消すためにwidthとheightで0を指定している。

使い所

display:none;はtransitionの効果が反映されない。

であればvisibility:hidden;を使えばいいだろうと思ったのでやってみたら使えた。

aである要素をtargetしたときにdisplay:none;からdisplay:block;へとフェードをつけて切り替えたかった。しかしdisplay:none;からのアニメーション付き切り替えは不可能だとわかり、visibility:hidden;に乗り換えた。

visibility:visible;へ切り替える際、widthとheightの値をautoか任意の値にしてやる必要がある。

つまり

とりあえずこれでいく。