css控制元素隱藏和顯示（css如何設定隱藏和顯示）

在CSS中很多隱藏元素的方法，但這些方法的可訪問性、佈局、動畫、效能和事件處理的方式有所不同。

  • 動畫： 一些CSS隱藏元素的方法一般是全有或者全無，元素要麼是完全可見，要麼是完全不可見，並且沒有中間狀態。其他的，比如透明度，可以是一個範圍的值，所以在這中間過程插入動畫成為可能；
  • 可訪問性： 下面的每一種方法都會在視覺上隱藏一個元素，但不一樣會真正的去除DOM元素。有一些方式隱藏元素後，螢幕閱讀器仍然能讀取到元素內容；
  • 事件處理： 隱藏元素之後，有些方式元素上的事件仍然能被觸發，而有些方式就會導致元素上的事件觸發無效；
  • 表現： 瀏覽器載入並解析 HTML DOM 和 CSS 物件模型後，頁面將分三個階段呈現：佈局（生成每個元素的幾何位置）、繪製（繪製每個元素的畫素）、組合（以適當的順序放置元素層）。僅導致構圖變化的效果明顯比影響佈局的效果更好。在某些情況下，瀏覽器還可以使用硬體加速。

下面就來看看CSS中隱藏元素的方式，以及每種方式的優缺點。

1. opacity 和 filter: opacity()

opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數字，或者 0% 和 100% 之間的百分比，對應地表示完全透明和完全不透明。

  • opacity: N：該屬性用來設定元素的透明度；
  • filter: opacity(N) ：filter屬性用來設定元素的濾鏡，opacity是濾鏡重的透明度，用來設定元素的透明度。

div {     opacity: 0; } div {     filter: opacity(0%); } 複製程式碼

在現代瀏覽器中，這兩者之間幾乎沒有實際的區別，但如果同時應用多種效果（模糊、對比度、灰度等）時，應該使用 filter 屬性。

注意：opacity 可以設定動畫並提供出色的效能，但頁面上保留完全透明的元素可能會觸發事件。

2. color alpha 透明度

可以將元素的color、background-color 和 border-color 等屬性設定為rgba(0,0,0,0)，這樣就會使元素完全透明：

div {     color: rgba(0,0,0,0);   background-color: rgba(0,0,0,0); } 複製程式碼

這三個屬性都是支援設定動畫效果的，需要注意，透明度不能應用於帶有背景圖片的元素，除非它們是使用 linear-gradient 或類似方法生成的。

Alpha 通道可以設定為：

  • transparent：完全透明（中間不能插入動畫）；
  • rgba(r, g, b, a)：紅色、綠色、藍色和 alpha；
  • hsla(h, s, l, a)：色相、飽和度、亮度和 alpha；
  • #RRGGBBAA 或 #RGBA。

3. transform

transform 屬性可以用於元素的平移、縮放、旋轉或傾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏：

div {     transform: scale(0); } div {     translate(-9999px, 0px) } 複製程式碼

transform 屬性提供了出色的效能和硬體加速，因為元素被有效地移動到了單獨的層中，並且可以在 2D 或 3D 中進行動畫處理。原始的佈局空間會保持原樣，並不會受影響。使用這種方式隱藏的元素不會觸發任何事件。

4. clip-path

clip-path 屬性可以建立一個剪輯區域，用於確定元素的哪些部分是可見的。使用 clip-path: circle(0) 可以將元素進行隱藏。

div {     clip-path: circle(0); } 複製程式碼

clip-path為新增動畫效果提供了空間，不過它只能在現代瀏覽器中使用。

5. visibility: hidden

visibility 屬性可以設定為 visible 或 hidden 來顯示和隱藏元素。

div {     visibility: hidden; } 複製程式碼

除非使用collapse值，否則元素使用的空間保持不變。

6. display: none

display 可能是最常用的元素隱藏方法; 。當其值為 none 時元素就隱藏了。被隱藏的元素不會在頁面中佔據位置，也不會響應繫結的監聽事件。

div {   display: none; } 複製程式碼

然而，在大多數情況下，display 可能是最糟糕的 CSS 屬性。除非使用 position:absolute 將元素移出文件流，或者採用contain屬性，否則它的隱藏過程無法設定動畫，並將觸發頁面重新佈局。

7. z-index

可以通過將元素的 z-index 屬性設定為負值，以實現元素的隱藏。這實際上就是將元素放在了我們看不到的層。

div {   z-index: -1; } 複製程式碼

8. position

position屬性允許使用top、bottom、left、right 從頁面中的預設位置移動元素。因此，絕對定位的元素可以通過左鍵：-9999px 等值移出螢幕：

div {   position: absolute;   left: -999px; } 複製程式碼

9. 覆蓋另一個元素

通過在元素的上面放置與背景顏色相同的元素，可以在視覺上隱藏一個元素。下面來使用::after偽元素來實現：

div::after {   position: absolute;   content: '';   top: 0;   bottom: 100%;   left: 0;   right: 0;   background-color: #fff; } 複製程式碼

雖然這從技術上講是可以實現的，但是這樣做需要更多的程式碼。

10. 縮小尺寸

可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實現元素的隱藏。可能還需要應用 overflow: hidden; 來確保內容不會溢位。

div {   height: 0;   padding: 0;   overflow: hidden; } 複製程式碼

使用這種形式我們可以在隱藏過程中使用動畫效果，並且他的效能會比 transform 好很多。

分類：