一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情。
前情提要
我相信大家对于让dom节点消失的知识点并不陌生。让节点消失的方式大体可以分为两类。一种是通过js直接让他从dom节点中删除，直接remove即可。另外一种是同过css的属性使其从页面上消失，但是在dom上并没有消失。现在就让我们来探寻一下吧
css让dom消失的几种方式
- display: none
- opacity: 0
- visibility: hidden
display: none
让dome节点从页面上也就是视觉上消失。会触发一次重排和重绘
- 特点
- 该dom通过F12打开开发者面板，然后在元素的tab页里会发现被我给定了display:none；dom节点已经没了，只留下一串注释符号：<!---->
- 也就说该属性会让dom节点在几何上消失，其所占用的文档流中的空间位置将会被释放。故而会引发一次整体dom的重排，然后重绘。
- 切记此时dom只是从视觉上消失了，但是浏览器是渲染了该元素的，只是隐藏起来了而已。
- 应用场景
- 我们使用的vue的内置指令：v-show的实际使用原理就是通过控制display来实现显示和隐藏
- 其次就是我们通过js根据交互来动态给dom节点赋值class值，进而实现动态的显示和隐藏。
- 其他的便是我们通过css的伪类来实现一些特殊的效果，还不想显示的时候。
opacity: 0
让dom节点从视觉上消失，根据0-1的不同值，消失的效果不同。说白了就是只是让其的透明度变成完全透明而已。相当于隐身了。
- 特点：
- 会从视觉上消失
- 但是位置不会被释放
- 依然可以继续进行点击
- 应用场景：
- 不使用组件库的上传组件，然后要把button和input:file标签结合的时候，就可以将input:file透明度降为0，然后移动到button的上方。这样用户点击button的时候实际上是点击了上传的input框。
- 实现一些页面ui效果的时候，只为达到视觉效果。
visibility: hidden
会触发一次重绘
- 特点：
- 会从视觉上消失
- 位置不会被释放
- 点击无效
- 应用场景
- 需要特殊的dom去占位，把某个区域给占了，但是又不想让他被发现
- 动态交互使其消失并且不可被点击
总结
- 三种方式都是为了实现某种动态交互而对dom进行显示隐藏。但是特点各有不同。
- 如果是想回收所占空间就用display
- 如果是不想回收所占空间，并且可点击那就用opacity
- 如果是不想回收所占空间，并且不可点击那就用visibility
