一般来说有四种,visibility:hidden、display:none、opacity:0、position:absolute&top,left 负的极大值(元素移出视线范围)
他们的区别主要分为:元素在文档中的位置,是否可以继承&反继承,是否可交互,是否可以添加transition属性。
1.display:none
浏览器不会渲染display为none的元素,在文档中没有位置,改变该属性会发生重绘;
并不会被子类继承,但是子类不会显示…因为一起被隐藏了;
不可交互,transition属性无效。
2.visibility:hidden
在文档中依然占据位置,只是不可见;
会被子类继承,子类也可以通过visibility:visible来反隐藏,改变该属性会发生重绘;
不会触发该元素已绑定事件;
transition无效
3.opacity=0
只是元素透明度为100%,文档中依然占据位置,
会被子类继承,但子类不能通过opacity=1来反隐藏,
依然能触发该元素已绑定事件
tansition有效
4.position:absolute + top:-9999px + left:-9999px
元素移出可视区域,不影响布局
子类跟随一起移出视区……
依然可以绑定事件,把hide移回视区
可以添加transition属性