“This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

CSS has many different ways to hide an element, but these have different effects on layout, animation, and event binding.

1.opacity 和 filter: opacity()

Opacity: N and filter: opacity(N), which can pass a number between 0 and 1, or a percentage between 0% and 100%, respectively, indicating full opacity and opacity. On modern browsers, there is little difference between the two, but if multiple effects (blur, contrast, grayscale, etc.) are applied at the same time, filter should be used.

.hide:hover .hide-item..hide:focus .hide-item {
  opacity: 0;
/* Also written: opacity: 0%; filter: opacity(0%); * /
}
Copy the code

Opacity can be animated and provides excellent performance, but note that fully transparent elements remain on the page and events can be bound.

2. Color Alpha transparency

Opacity affects the entire element and can also be set separately for color, background-color and border-color. Use rgba(0,0,0,0) or similar methods to make elements completely transparent:

.hide:hover. Hide-item,.hide:focus. Hide-item {color: rgba(0,0,0); Background - color: rgba (0,0,0,0); }Copy the code

Each of the above attributes can be animated individually to create interesting effects, and this way of hiding elements can also trigger events.

3.transform

The transform property can be used to move, scale, rotate, or tilt elements. Scale (0) or translate(-999px, 0px) hides the element:

.hide:hover .hide-item, .hide:focus .hide-item { transform: scale(0); /* Can also be written as: transform: translate(-999px, 0); * /}Copy the code

Transform has great performance because elements are moved into a separate layer and can be animated in EITHER 2D or 3D. While the original layout space remains in place, it cannot trigger any events.

4.clip-path

The clip-path property creates a clipping area that specifies which parts of the element are visible. Use the clip – path: circle (0); Elements will be completely hidden.

.hide:hover .hide-item,
.hide:focus .hide-item {
  clip-path: circle(0);
}
Copy the code

Clip-path provides inspiration for interesting animations, but it is only available in modern browsers. Elements hidden in this way cannot trigger events.

5.visibility

Visibility properties can be set to Visible or Hidden to show and hide elements:

.hide:hover .hide-item,
.hide:focus .hide-item {
  visibility: hidden;
}
Copy the code

The hidden element will remain in its original position, but this way of hiding the element cannot bind events. If you use visibility:collapse, the element will not occupy its original position.

6.display

Display is probably the most common element hiding method. None effectively removes the element as if it had never existed in the DOM. However, in most cases this is not a good method and its inability to achieve animation also causes backflow (relayout).

.hide:hover .hide-item,
.hide:focus .hide-item {
  display: none;
}
Copy the code

7. HTML hidden attribute

The HTML Hidden attribute can be added to any element:

<p hidden>
  Hidden content
</p>
Copy the code

This has the same advantages and disadvantages as display: None, and can be useful when using a CMS system that does not allow style changes.

8. Absolute positioning

Position: Absolute Moves elements from their default positions within the page layout to up, down, left, and right. Therefore, absolutely positioned elements can be removed from the screen using left: -999px or similar:

.hide:hover .hide-item,
.hide:focus .hide-item {
  position: absolute;
  left: -999px;
}
Copy the code

9. Element coverage

You can visually hide an element by placing another element with the same color as the background on top of this element. In the following example, a ::after pseudo-element is overlaid on this element:

.hide-item {
  position: relative;
}

.hide-item::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}

.hide:hover .hide-item::after,
.hide:focus .hide-item::after {
  bottom: 0;
}
Copy the code

While technically possible, this option requires more code than the other methods. Elements hidden by this method can also bind events.

10. Downsize

You can hide elements by minimizing their size with width, height, fill, and border width font sizes.

.hide:hover .hide-item,
.hide:focus .hide-item {
  height: 0;
  padding: 0;
  overflow: hidden;
}
Copy the code

This allows for interesting animations, but transform performs significantly better.

conclusion

Display: None has been the preferred solution for hiding elements for years, but transform or opacity is a better choice when considering performance.

The front end is beautiful