読者です 読者をやめる 読者になる 読者になる

CleanUp

備忘録と豆の知識

備忘録 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か任意の値にしてやる必要がある。

 

つまり

とりあえずこれでいく。