爲什麼這些元素不褪色/過渡

我做了一個小的導航，將鼠標懸停在上面回家我要讓它慢慢用transition: 0.4s;滑出左側，但它不希望做任何事情，我已經將它應用於每一個元素只是爲了表明它不管用什麼都不起作用。爲什麼這些元素不褪色/過渡

任何人都知道如何解決這個問題？也許這是因爲position: fixed;？

我已經做了jsfiddle，請記住，這只是我的網站的一個片段，並且沒有審美風格。

在此先感謝！

來源

2016-12-16 Panic

[顯示屏上轉變：房產]的可能的複製（http://stackoverflow.com/questions/3331353/transitions-on-the-display-property） –

您不能在display財產的過渡。

來源

2016-12-18 09:27:47 ZanicL3

你不能把對display財產的過渡。

下面是一個使用上max-width過渡到允許過渡要發生jsFiddle。

.desktopnav > ul > .dropdown > .dropdown-content { 
    float: left; 
    transition: max-width 0.4s; 
    overflow: hidden; 
    max-width: 0px; 
} 

.desktopnav >ul > .dropdown:hover .dropdown-content { 
    display: block; 
    max-width: 500px; 

}

您將需要更多的css來隱藏不希望的視覺效果，並強制列表項保持頂部對齊。

您在使用UL /李是有點過了，liul元素，不section元素，ul的應該只是孩子應該只有li子元素。

來源

2016-12-16 23:56:02 LucasP

謝謝您的幫助！ – Panic

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

這是可以設置動畫屬性的列表。顯示不是其中之一。這就是爲什麼你沒有看到轉變。

來源

2016-12-17 00:00:44

你不能動畫display財產。如果要實現「向左滑動」效果，則必須爲max-width屬性設置動畫。

我已經分叉的小提琴說明這一點：https://jsfiddle.net/w811wvfp/1/

基本上我所做的是：

.desktopnav > ul > .dropdown { 
    ... 
    white-space: nowrap; 
} 

.desktopnav > ul > .dropdown > .dropdown-content { 
    ... 
    max-width: 0; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.desktopnav > ul > .dropdown:hover .dropdown-content { 
    max-width: 1000px; 
}

來源

2016-12-17 00:14:04

謝謝，這就是我想要的:)！ – Panic

爲什麼這些元素不褪色/過渡

回答

相關問題