CSS中用 opacity、visibility、display对比总结

 

	display：none	visibility：hidden	opacity:0
回流	是	否	否
重绘	是	是	不一定
是否存在	否	是	是
是否占空间	否	是	是
子元素能否设置显示	否	可以	不可以
绑定事件	否	不可以	可以
transition的支持	不支持	支持	支持

更多原理参考：https://segmentfault.com/a/1190000015116392

transition使用参考：http://www.w3school.com.cn/cssref/pr_transition.asp

回流重绘：https://www.cnblogs.com/qcloud1001/p/10265985.html

 

dispaly 和 visibility 属性会产生重绘，而 opacity 属性不一定会产生重绘。参考https://www.cnblogs.com/mengff/p/8335111.html

元素提升为合成层后，transform 和 opacity 不会触发 repaint，如果不是合成层，则其依然会触发 repaint。 
在 Blink 和 WebKit 内核的浏览器中，对于应用了 transition 或者 animation 的 opacity 元素，浏览器会将渲染层提升为合成层。
也可以使用 translateZ(0) 或者 translate3d(0,0,0) 来人为地强制性地创建一个合成层。