动画的过渡效果一遇到display就没有效果，是因为：
display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。

所以display做不了过渡效果，但是可以有其他的办法做过渡效果

解决办法:

1，依然用display，但是在js中加setTimeout延迟一下
2，用opactiy，0和1是有过渡效果的
3，用visibility,visible就相当于1，hidden相当于0