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

  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; 不占位隐藏，元素切换成显示的时候会触发重排。