Fe-interview: [css] 第140天 CSS3中的transition是否可以过渡opacity和display？

[haizhilin2013]

第140天 CSS3中的transition是否可以过渡opacity和display？

[NicholasBaiYa]

可以过渡opacity，不能过渡display。
transitionz：所有可被动画的属性都表现出过渡动画。

[EmiyaYang]

transition可以过渡opacity, 但不可过渡display.

一般情况下线性属性如opacity都是可以被transition所过渡的, 非线性或者离散的值如display不可被过渡.

[xxf1996]

opacity可以过渡，display则不能；

[467827183]

opacity可以过度因为有0-1的变化，display没有，我是这么理解的

[JiangXue93]

opacity可以，display不能；

参照css可动画属性列表
·可动画的属性集将有变动，开发者应关注。
·auto 值常常较复杂，规范指出不要在它上动画。在 auto 上动画结果可能不可预期，这取决于浏览器及其版本，应当避免使用。
·在插入元素（如 .appendChild()）或改变属性 display: none 后立即使用过渡, 元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 window.setTimeout() 延迟几毫秒。（setTimeout试了，display没法呀！有人hack成功了没？）

[Gloomysunday28]

transition过渡display是有一个前提条件:
浏览器渲染是在每一帧的最后，每一帧都会执行以下操作:

1. js执行
   2.style加持
   3.layout
   4.paint
   5.composite

在js执行过程中， 遇到DOM操作，并不会立即渲染，而是推入到队列中，等待UI Render的执行一次性渲染，这是浏览器的优化手段
接下来是重点：
在获取DOM的布局信息时，会强制清空队列进行渲染，此时transition是可以过渡display的

[Konata9]

transition 可以过渡 opacity 不能过渡 display。
基本常用的 width,height,background,opacity,scale 等属性都可以进行过渡。

所有可以过渡的元素如下：
参考文章：CSS animated properties

[Guanrui1]

transition 可以过渡 opacity 不能过渡 display。
基本常用的 width,height,background,opacity,scale 等属性都可以进行过渡。

所有可以过渡的元素如下：
参考文章：CSS animated properties

background如果用的是渐变的话也是不能过度的呢