css偏方：你有几种方法让DOM消失？

为啥会有这么个问题？

其实这是我在某次面试前端实习生时候遇到的一个问题，面试官说你有多少种让DOM隐藏的方法，能说多少说多少，当时脑抽，因为是“能说多少说多少”就觉得那肯定有好多，总结一下当时想出来的“偏方”。

回答：

1. display: none;

2. visibility: hidden;

两者不同：如果设置 display:none，将隐藏整个元素，如果设置 visibility:hidden，元素的内容将不可见，但元素仍保持原来的位置和大小。

思来想去既然是隐藏，我是不是还可以说 opacity:0;，问了一下这个答案行不行，他说行，还有吗？

当然有：

设置position为position:absolute或fixed，可以通过z-index遮掩。

设置父元素为 overflow:hidden，将想要隐藏的元素移出父元素范围。

通过css的clip属性，将DOM裁剪。

通过css的transform属性

a.  transform: skew(90deg) 拉伸90度，当然不一定是90
b.  transform: scale(0) 缩放到0
c.  transform: rotateX(90deg) 当然角度不一定是90，也不一定是沿x轴

＝。＝面试完之后我就去群里边问了一下，大部分人说的答案都是display: none;和 visibility: hidden;斗胆猜测一下这两个应该是面试官想要的答案。

偏方的使用

虽然答案可能就这两个，但是我还是有用到过我的“偏方”去做隐藏元素，

我遇到的情况是，我需要为DOM元素做一个fadeout＋fadein的动画，元素带有click事件，fadeout之后只是opacity为0，然后就有了 元素隐藏了之后点击事件还存在 这个bug。

当然解决方案有很多，可以通过js，也可以通过css，css可以通过延时＋transform来做，也算是我的偏方吧，可能解决方案并不完美，望留言指教。

当然这只是一些自己瞎琢磨出来的方法，希望有和我一样爱闹腾的同学补充一下下,也希望大神见到后不吝指教，感激不尽。

作者：MD纸一张
链接：https://www.jianshu.com/p/67d69ba3c44d