In the development of websites, we have also encountered a lot of things about display and hiding, which is simple to say. Today, we are free to organize them.

display

display:none | display:block is the most common way for elements to be explicit and implicit, but there is a problem with this method. The display attributes of elements are not all blocks before they are hidden, but may be inline, inline-block, etc.

<button id="show">display</button>
<button id="hide">hide</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">Test text</div>

<script>
show.onclick = function(){
    test.style.display = 'block';
}    
hide.onclick = function(){
    test.style.display = 'none';
}
</script>    

visibility

visibility:hidden and display:none are often compared as two ways of hiding elements. In fact, the difference is simple: the former does not separate from the document flow, retaining the physical area occupied by the elements before hiding, while the latter is separated from the document flow, and if the page is re-displayed, it needs to be redrawn. There is also a difference that few people mention, if the parent set display:none; the child set display:block will not show; and if the parent set visibility:hidden; when the child set visibility:visible, the child will show up.

Be careful

visilibity can apply the transition attribute. Because visibility is a discrete step, in the range of 0 to 1 digits, 0 means hiding and 1 means displaying. visibility:hidden can be seen as visibility:0; visibility:visible can be seen as visibility:1. Thus, visibility application transition is equivalent to the transition effect between 0 and 1. In fact, as long as the value of visibility is greater than 0, it will be displayed. Because of this phenomenon, we can use transition to implement delay display and hiding of elements.

<button id="show">display</button>
<button id="hide">hide</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">Test text</div>

show.onclick = function(){
    test.style.transition = 'none';
    test.style.visibility = 'visible';
}    
hide.onclick = function(){
    test.style.transition = 'visibility 0.2s 0.5s';
    test.style.visibility = 'hidden';
}

hidden

Today, I checked the relevant documents to get a relatively clear understanding of hidden:
hidden is a global attribute of HTML, which is used exclusively to hide display elements. Like display:none, element use is separated from document flow and cannot introduce js events.

<button id="show">display</button>
<button id="hide">hide</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">Test text</div>

show.onclick = function(){
    test.removeAttribute('hidden');
    /*test.hidden = '';*/
}    
hide.onclick = function(){
    test.setAttribute('hidden','hidden');
    /*test.hidden = 'hidden';*/
}

opacity

The advantage of opacity is opacity:0; it is still possible to introduce js events, which display:none;hidden:hidden does not have.

<button id="show">display</button>
<button id="hide">hide</button>
<button id="reset">reduction</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">Test text</div>

show.onclick = function(){
    test.style.transition = 'none';
    test.style.opacity = '1';
}    
hide.onclick = function(){
    test.style.transition = 'opacity 0.2s';
    test.style.opacity = '0';
}
test.onclick = function(){
    this.style.width = '200px';
}
reset.onclick = function(){
    history.go();
}

overflow

overflow:hidden in css; it means that the part hiding is beyond, and can also use the parent overflow:hidden, with height:0;widht:0; to achieve display hiding.

Note that the overflow element fails when it is set between the absolute positioning element and its containing block

#testWrap{
    height: 70px;
    transition: height 1s;
    overflow: hidden;
}

<button id="show">display</button>
<button id="hide">hide</button>
<div id="testWrap">
    <div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">Test content</div>        
</div>

show.onclick = function(){
    testWrap.style.height = '70px';
}    
hide.onclick = function(){
    testWrap.style.height = '0';
}

clip

The clip of css is not used much in normal times. If it exists, let's learn it. (The mentality is not very good........................................... )
Looking at the most comprehensive document, my big MDN (the best document in the world - personal quotation) says this:

The clip CSS property defines what portion of an element is visible. The clip property applies only to absolutely positioned elements, that is elements with position:absolute or position:fixed.

In other words, clip elements can only be applied to absolute or fixed elements.

<button id="show">display</button>
<button id="hide">hide</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">Test content</div>   

show.onclick = function(){
    test.style.position ='static';
    test.style.clip = 'auto';
}    
hide.onclick = function(){
    test.style.position ='absolute';
    test.style.clip = 'rect(0 0 0 0)';
}

transform

transform is a collection of some effects of css3, mainly moving, rotating, zooming, tilting, four basic operations, can also be set matrix matrix matrix to achieve more complex effects (not yet done ~); it is better to add prefix
IE9-browser does not support, Safari 3.1-8, Android 2.1-4.4.4, IOS 3.2-8.4 need to add prefixes.

1: scale
transform: scale(0) when the element is hidden

<button id="show">display</button>
<button id="hide">hide</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">Test content</div> 

show.onclick = function(){
    test.style.transform ='scale(1)';
}    
hide.onclick = function(){
    test.style.transform ='scale(0)';
}

2: RoateX (90deg) when the element is hidden

<button id="show">display</button>
<button id="hide">hide</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">Test content</div>

show.onclick = function(){
    test.style.transform ='rotateX(0)';
}    
hide.onclick = function(){
    test.style.transform ='rotateX(90deg)';
}

3: skew(90deg) when the element is hidden

<button id="show">display</button>
<button id="hide">hide</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">Test content</div>

show.onclick = function(){
    test.style.transform ='skew(0)';
}    
hide.onclick = function(){
    test.style.transform ='skew(90deg)';
}

Here's a chicken burglar before:
Location elements can cover the flow of documents. The before pseudo-elements of pseudo-elements set the same size. By controlling the location attributes of pseudo-elements, the effect of hiding and displaying can be achieved.

<div style="background:lightblue;width:100px;height:60px;margin-top: 10px;">Test content</div>

#test:hover:before{
    content: "";
    position: absolute;
    width: 100px;
    height: 60px;
    background-color: white;
}

There are more methods, some methods may not be used in the project, is a summary of some ideas.