使用CSS的transition时遇到的一些问题

​ 在使用css的transition的过程中，遇到一些有趣的问题，这里做一些简单记录，会有持续的更新，之后可能会把他们整理成统一的文档作为记录

淡入淡出不能使用display：none

在使用transition的时候，对页面的淡入淡出不能使用display:none，这样会直接让页面立即出现和消失。

原因是display设置为none会让元素脱离文档流，从在dom层就不进行渲染，transition无法对脱离文档流的元素进行操作，所以无法实现过渡

常用的处理办法是使用visibility与opacity两个属性作为淡入淡出的参考值

visibility是单纯的表示元素是否可见属性值如下

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit	规定应该从父元素继承 visibility 属性的值。

而opacity则是透明度值，值从0.0~1.0的范围

值	描述
value	指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit	Opacity属性的值应该从父元素继承