顯示屏上的轉(zhuǎn)換：屬性我目前正在設(shè)計一個CSS'mega dropdown'菜單 - 基本上是一個常規(guī)的CSS-only下拉菜單，但包含不同類型的內(nèi)容。目前，似乎CSS3過渡不適用于“display”屬性，即你不能做任何類型的過渡display: none到display: block（或任意組合）。當(dāng)有人將鼠標懸停在其中一個頂級菜單項上時，是否有人會想到上述示例中的第二層菜單可以“淡入”？我知道你可以在visibility:屬性上使用轉(zhuǎn)換，但我想不出有效利用它的方法。我也嘗試過使用身高，但這只是失敗了。我也知道使用JavaScript實現(xiàn)這一點是微不足道的，但我想挑戰(zhàn)自己只使用CSS而且我認為我現(xiàn)在有點短。歡迎所有和任何建議。
3 回答
翻翻過去那場雪
TA貢獻2065條經(jīng)驗 獲得超14個贊
您可以連接兩個或更多轉(zhuǎn)換，visibility這次是方便的。
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>
不要忘記transition屬性的供應(yīng)商前綴）
更多細節(jié)在本文中
LEATH
TA貢獻1936條經(jīng)驗 獲得超7個贊
在本文發(fā)表時，如果您嘗試更改display屬性，所有主流瀏覽器都會禁用CSS過渡，但CSS動畫仍然可以正常工作，因此我們可以將它們用作解決方法。
示例代碼： - （您可以相應(yīng)地將它應(yīng)用于您的菜單） 演示
將以下CSS添加到樣式表： -
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }} @keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }}然后將fadeIn動畫應(yīng)用于父hover上的子項： - （當(dāng)然設(shè)置display: block）
.parent:hover .child {
display: block;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;}更新2019 - 也支持淡出的方法：
（有些JS需要）
// We need to keep track of faded in elements so we can apply fade out later in CSS
document.addEventListener('animationstart', function (e) {
if (e.animationName === 'fade-in') {
e.target.classList.add('did-fade-in');
}
});
document.addEventListener('animationend', function (e) {
if (e.animationName === 'fade-out') {
e.target.classList.remove('did-fade-in');
}
});
div {
border: 5px solid;
padding: 10px;
}
div:hover {
border-color: red;
}
.parent .child {
display: none;
}
.parent:hover .child {
display: block;
animation: fade-in 1s;
}
.parent:not(:hover) .child.did-fade-in {
display: block;
animation: fade-out 1s;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<div class="parent">
Parent
<div class="child">
Child
</div>
</div>
添加回答
舉報
0/150
提交
取消