在页面上隐藏元素的方法有哪些?

  1. visibility: hidden;

    占位隐藏,元素切换成显示的时候只会触发重绘

  2. display: none;

    不占位隐藏,元素切换成显示的时候会触发重排

  3. position:absolute;left:200vw;top:200vh;

    不占位隐藏,元素切换成显示的时候会触发重排

  4. opacity: 0;

    占位隐藏。

    • 提升为合成层之后,元素切换成显示的时候会触发重绘
    • 没有提升为合成层之后,元素切换成显示的时候会触发重排
  5. transform: scale(0);

    占位隐藏。

    • 提升为合成层之后,元素切换成显示的时候会触发重绘
    • 没有提升为合成层之后,元素切换成显示的时候会触发重排
  6. transform: translateY(-200vh) || transform: translateX(-200vw)

    不占位隐藏。

    • 提升为合成层之后,元素切换成显示的时候会触发重绘
    • 没有提升为合成层之后,元素切换成显示的时候会触发重排
  7. width: 0; height: 0; 不占位隐藏,元素切换成显示的时候会触发重排