demo
transitionとは?
css3のtrasitionは状態変化にアニメーションをつけることができる。Test1にhoverすると、boxの大きさと色が変わるようになっている。
displayはtransitionできない
便利なtransitionだが、displayプロパティには設定できないようだ。基本的に色や数値のパラメーターを持ったものに適応できる。
heightとopacityで代用
heightを0にし、opacityも0にすれば、目から見える範囲ではdivは消える。ちょっとした時に使うのであれば、この代替案で十分だと思う。おかしい挙動をするかもしれないのでそのあたりは自己責任でお願いします。
・参考
Transitions on the CSS display property - Stack Overflow
display: noneはtransitionできないので - console.lealog();