您需要透過其他方式隱藏該元素才能使其正常運(yùn)作。
我透過將兩個(gè) 如果您將 要解決此問題,請(qǐng)始終允許元素為 可能還有更多解決方案,但如果將元素切換為 但這行不通。根據(jù)我的經(jīng)驗(yàn),我發(fā)現(xiàn)這沒有任何作用。 因此,您始終需要保留元素 opacity: 0
來實(shí)現(xiàn)這一效果。
display
屬性從 none
切換為 block
,其他元素上的轉(zhuǎn)換將不會(huì)發(fā)生。 強(qiáng)>display: block
,但透過調(diào)整以下任一方式來隱藏元素:
高度
設(shè)定為0
。 不透明度
設(shè)定為0
。 overflow:hidden
元素的框架之外。 display: none
,則無法執(zhí)行轉(zhuǎn)換。例如,您可以嘗試嘗試這樣的事情:div {
display: none;
transition: opacity 1s ease-out;
opacity: 0;
}
div.active {
opacity: 1;
display: block;
}
display: block
- 但您可以透過執(zhí)行以下操作來繞過它:div {
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
div.active {
opacity: 1;
height: auto;
}
您可以連接兩個(gè)或更多過渡,而 visibility
這次會(huì)派上用場。
div { border: 1px solid #eee; } div > ul { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } div:hover > ul { visibility: visible; opacity: 1; }
<div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>