CSS过渡属性transition与display冲突问题

冲突：当改变元素display属性时，过渡属性transition失效。

原因：display:none的时候，页面文档流中将不会存在该元素。transition无法对一个从有到无的元素产生过渡效果。

解决方法：

        1.改变元素的宽/高为0px,达到隐藏的目的。

        2.使用visibility替代display。