在 CSS 中設定淡入淡出

1. 在 CSS 中使用 opacity 和 visibility 屬性以及 transition 屬性設定過渡
2. 在 CSS 中使用 height、opacity 和 overflow 屬性以及 transition 屬性設定過渡

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

在 CSS 中使用 opacity 和 visibility 屬性以及 transition 屬性設定過渡

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

例如，建立一個 div 並使用 ul 和 li 標籤建立一個包含三個無序列表項的列表。給 div 一個 1px solid black 的邊框以檢視它。將 ul 的屬性設定為 opacity: 0 和 visibility: hidden 和 transition: visibility 0s, opacity 0.6s linear。我們同時使用 opacity 和 visibility 因為如果我們只使用 opacity: 0，專案仍然可以點選和懸停。將 ul 懸停屬性設定為 visibility: visible 和 opacity: 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 中使用 height、opacity 和 overflow 屬性以及 transition 屬性設定過渡

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

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

下面的例子顯示 div 為空，div 的 height 為 0px。但是，當我們將滑鼠懸停在 div 上時，專案列表會以 ease-in 效果顯示。ease-in 選項設定過渡的緩慢開始。div 的 height 屬性變為 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;
}