在 CSS 中設定淡入淡出

Rajeev Baniya 2023年2月20日 2021年12月20日
  1. 在 CSS 中使用 opacityvisibility 屬性以及 transition 屬性設定過渡
  2. 在 CSS 中使用 heightopacityoverflow 屬性以及 transition 屬性設定過渡
在 CSS 中設定淡入淡出

本文將介紹 CSS 中設定過渡的方法。我們將學習在 opacityheightvisibility 上使用過渡來在懸停和懸停時提供淡入和淡出效果。

在 CSS 中使用 opacityvisibility 屬性以及 transition 屬性設定過渡

我們不能在 CSS 的 display 屬性中使用 transition 屬性。例如,我們不能使用 CSS transition 屬性在懸停(滑鼠進入)後將 display : none 更改為 display : block,反之亦然。因此,我們可以使用 opacityvisibility 屬性以及過渡來為專案提供淡入和淡出效果。Transition 具有某些屬性,例如 transition-propertytransition-durationtransition-timing-functiontransition-delay。我們也可以使用 transition 速記屬性作為 transition : opacity 2s linear 1s。這裡 opacity 表示 transition-property2s 表示 transition-durationlinear 表示 transition-timing-function,而 1s 表示 transition-delay。我們可以使用懸停來試驗 transition

例如,建立一個 div 並使用 ulli 標籤建立一個包含三個無序列表項的列表。給 div 一個 1px solid black 的邊框以檢視它。將 ul 的屬性設定為 opacity: 0visibility: hiddentransition: visibility 0s, opacity 0.6s linear。我們同時使用 opacityvisibility 因為如果我們只使用 opacity: 0,專案仍然可以點選和懸停。將 ul 懸停屬性設定為 visibility: visibleopacity: 1,以便 ul 的列表項僅在懸停時顯示一些 transition 效果。

下面的示例顯示 ul 的專案僅在懸停時可見。這些專案在 0.6 秒內以線性效果出現,並在將滑鼠移開時再次隱藏。

示例程式碼:

<div>
 <ul>
 <li> Apple </li>
 <li> Banana </li>
 <li> Mango </li>
 </ul>
</div>
div {
 border : 1px solid black;
}
div > ul {
 visibility: hidden;
 opacity: 0;
 transition : visibility 0s, opacity 0.6s linear;
}
div:hover > ul {
 visibility : visible;
 opacity : 1;
}

在 CSS 中使用 heightopacityoverflow 屬性以及 transition 屬性設定過渡

另一種在 display: nonedisplay: block 上使用過渡的替代方法可能是與過渡一起使用的 heightoverflowopacity 屬性。我們可以為列表設定 opacity : 0height : 0 以便看不到專案。我們還必須設定 overflow: hidden,以便專案不會超出 divtransition-duration 需要時間。我們可以像第一種方法一樣使用 transition 速記屬性。

例如,建立一個 div 並使用 ulli 標籤建立一個包含三個無序專案的列表。給 div 一個 1px solid black 邊框,與第一種方法相同。將 ul 的屬性設定為 opacity: 0overflow: hiddenheight: 0。將 transition 屬性的值設定為 opacity 0.6s ease-in。將 ul 懸停屬性設定為 height: autoopacity: 1,以便 ul 的列表項僅在懸停時顯示一些 transition 效果。

下面的例子顯示 div 為空,divheight0px。但是,當我們將滑鼠懸停在 div 上時,專案列表會以 ease-in 效果顯示。ease-in 選項設定過渡的緩慢開始。divheight 屬性變為 auto。當我們從 div 中懸停時,它又變成了空的。

示例程式碼:

<div>
 <ul>
 <li>Apple</li>
 <li>Banana</li>
 <li>Mango</li>
 </ul>
</div>
div {
 border: 1px solid black;
}
div > ul {
 opacity: 0;
 height: 0;
 overflow: hidden;
 transition: opacity 0.6s ease-in;
}
div:hover > ul {
 opacity: 1;
 height: auto;
}

相關文章 - CSS Transition