在使用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属性的值应该从父元素继承 |
网友评论