元素隐藏方法的异同

前言

这个是我偶然间发现scale(0)也是可以隐藏元素的时候尤为好奇的问题，接下来我将通过代码的例子来阐述它们的异同！

共同点

这个无可置疑的它们都能起到隐藏元素的作用
（这个比较简单就不做说明，有兴趣的小伙伴可以自己试一试）

不同点

先上代码

<div class="box"></div>
<div class="red"></div>

.box{
            width: 200px;
            height: 200px;
            background-color: turquoise;
        }
        .box:hover{
            visibility: hidden;
        }
        .red{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }

一开始是这样子的：

移入后呢：

如果改成display

.box:hover{
            display: none;
        }

那scale(0)呢？同理代码如下：

.box:hover{
            transform: scale(0);
        }

那opacity:0呢？
效果如下：

小结

1. visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，
2. display:none属性会使这个对象彻底消失不显示，也不再占用位置
3. scale(0)与opacity:0的效果跟 visibility:hidden;一样，但是存在一定的不同，就是当你鼠标移入元素不显示后呢对于前面两者而言这个元素仍然是存在的，你依然处于移入状态，而对于后者而言元素是相对于没了，这个时候就会出现一闪一闪的效果！
4. 补充一点，scale(0)到scale(1)的过渡是由中间向两边延伸，因为默认的transform-origin:center！！！