在 CSS 中設定淡入淡出
-
在 CSS 中使用
opacity
和visibility
屬性以及transition
屬性設定過渡 -
在 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;
}