display: none;

  1. DOM structure: Browsers do not render elements with display attributes of None, which take up no space;
  2. Event listening: DOM event listening cannot be performed.
  3. Performance: Dynamic change of this property will cause rearrangement, poor performance;
  4. Inheritance: No inheritance of quilt elements, after all, subclasses are not rendered.
  5. Transition: Transition does not support display.

visibility: hidden;

  1. DOM structure: elements are hidden but rendered and do not disappear, taking up space;
  2. Event listening: DOM event listening cannot be performed.
  3. Performance: Dynamic change of this property will cause redraw, high performance;
  4. Inheritance: inherits the quilt element, and the child element can be set to visibility: visible; To unhide;
  5. Transition: Visibility will be displayed immediately, and hiding will be delayed

opacity: 0;

  1. DOM structure: transparency is 100%, elements are hidden and occupy space;
  2. Event listening: DOM event listening can be performed;
  3. Performance: improved to synthetic layer, will not trigger redrawing, high performance;
  4. Inheritance: it inherits quilt elements, and the child elements cannot be hidden using opacity: 1;
  5. The function allows time-lapse display and opacity