深入display:none与visibility:hidden

display:none

我们都清楚当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间，但我们仍然可以通过JavaScript操作该元素（本质上dom是存在的这里跟v-if不一样）

2.display:none不具有继承性

3.无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以

由于display:none的元素根本不会在界面上渲染，就是连1个像素的都不占，因此自然无法通过鼠标点击命中，而元素也无法获取焦点，那么也不能成为键盘事件的命中目标；而父元素的display为none时，子元素的display必定为none，因此元素也没有机会位于事件捕获或冒泡阶段的路径路径上，因此display:none的元素无法响应事件。

4.不耽误form表单提交数据 虽然我们无法看到display:none的元素，但当表单提交时依然会将隐藏的input元素的值提交上去。

visibility

1.会子元素所继承，父元素为visibility:hidden，而子元素可以设置为
visibility:visible并且生效

2.和display:none一样无法获得焦点

3.可以响应事件（在冒泡阶段）
将鼠标移至.visible时，.hidden会响应hover事件显示。

4.和display:none一样不妨碍form表单的提交

参考https://juejin.cn/post/6844903686313869320

opacity: 0;

DOM 结构：透明度为 100%，元素隐藏，占据空间；

事件监听：可以进行 DOM 事件监听；

性 能：提升为合成层，不会触发重绘，性能较高；

继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；

transition：opacity 可以延时显示和隐藏