not good but great

プログラミング、アート、映画・本の感想について書きます。

css3のtransitionはdisplayプロパティに適応されない

demo


transitionとは?

css3のtrasitionは状態変化にアニメーションをつけることができる。Test1にhoverすると、boxの大きさと色が変わるようになっている。

displayはtransitionできない

便利なtransitionだが、displayプロパティには設定できないようだ。基本的に色や数値のパラメーターを持ったものに適応できる。

heightとopacityで代用

heightを0にし、opacityも0にすれば、目から見える範囲ではdivは消える。ちょっとした時に使うのであれば、この代替案で十分だと思う。おかしい挙動をするかもしれないのでそのあたりは自己責任でお願いします。

・参考
css - Transitions on the display: property - Stack Overflow
display: noneはtransitionできないので - console.lealog();