前言

要讓一個元素"消失", 有 3 種做法. 它們有一點點的不同. 在實戰時要清楚什麼時候用什麼哦.

例子說明

<div class="abc">
  <div class="xyz"></div>
</div>

CSS Style

.abc {
  border: 1px solid red;
  width: max-content;
  .xyz {
    width: 100px;
    height: 100px;
    background-color: red;
  }
}

效果

opacity: 0

opacity 是讓元素透明. 雖然看不到, 但是佔據空間, 同時可被觸碰 (e.g. hover).

.xyz {
  opacity: 0;
  &:hover {
    opacity: 1;
  }
}

效果

雖然看不見, 但是佔據空間, 而且可以 hover.

visibility: hidden

它比 opacity 厲害一點, 看不見, 同時也觸碰不到了, 但依然佔據空間.

.xyz {
  visibility: hidden;
  &:hover {
    visibility: visible;
  }
}

效果

已經 hover 不到了, 但它依然佔據空間.

display: none

它才是真正讓元素消失的, 看不見, 不佔空間, hover 不到.

.xyz {
  display: none;
  &:hover {
    display: block;
  }
}

效果

由於不佔據空間了, 只剩下 container 的 1px border. 所以只看見小紅點.

總結

opacity 看不見, 佔空間, 能觸碰 (re-paint)

visibility 看不見, 佔空間, 不能觸碰 (re-paint)

display: 看不見, 不佔空間, 不能觸碰 (re-flow)

fade in 效果

display none 轉換 display: block 是沒有 transition 效果的.

所以通常用 visibility + opacity 來實現 fade in. 但要注意空間的問題, 因為 visibility 是佔據空間的.

有時候會用 height: 0 來幫助消失空間. 但也要注意 height: 0 的冷知識哦.