Css Transition For My Home Made Nav

Question

我爲我的網站自己創建了一個導航菜單，我不是專家，但我認爲菜單變成了很棒......我想讓我的菜單打開一點慢一點瞬間，也許有一個0.5s的過渡...我試圖實現自己，但我似乎無法弄清楚....我創建了一個jsfiddle來顯示我的導航欄...我是希望有人能告訴我如何有可能過渡到所有的下拉菜單，如果有可能...謝謝

jsfiddle：http://jsfiddle.net/vRdEp/（它在這裏有點破） 我的網站：www.curious-howto。 com

我的css：

ul#navitemul { 
border-radius: 0px 20px 20px 20px; 
margin:0px!important; 
width:500px; 
} 

.belownav { 
top:0px; 
left:183px; 
position:absolute; 
z-index:100; 
box-shadow: 0 0 10px #000 inset; 
border-radius: 5px 0px 0px 5px; 
padding:20px!important; 
background:#282828!important; 
} 

.navitem a { 
margin-right: 10px; 
border: 1px solid #424242!important; 
text-overflow:ellipsis; 
display:block; 
overflow:hidden; 
border-radius:5px; 
width:200px!important; 
padding:0px!important; 
float:left; 
height:40px; 
background:#424242!important; 
} 

.navitem a:hover { 
border:1px solid #585858!important; 
background:#000!important; 
} 

img.fl { 
float:left; 
} 

span.marleft { 
letter-spacing:1px; 
font-size:12px!important; 
text-decoration:none; 
color:white!important; 
margin-left:15px!important; 
line-height:38px; 
} 

li.marright{ 
float:left!important; 
margin-bottom:10px!important; 
margin-right:10px!important; 
} 

.ontop{ 
color:white; 
font-size:28px!important; 
margin-bottom:20px!important 
} 

ul#loginmenu { 
border-radius:0px 0px 30px 30px; 
z-index:1000; 
left:200px; 
width:500px!important; 
overflow:auto; 
max-height:600px; 
left:-100px!important; 
} 

li.logo { 
margin:0px!important; 
line-height:10px!important; 
border-radius: 30px 0px 0px 0px; 
padding:10px 40px 10px 40px!important 
} 

span#navlogo { 
font-size:20px; 
} 

#menu{ 
position:relative; 
top:10px; 
width:80%; 
max-width:750px; 
min-width:660px; 
height:47px; 
border-radius: 30px 30px 0px 0px; 
background-color:#172322; 
margin:0px; 
padding:0px; 
list-style:none; 
color:#fff; 
display:inline-block; 
float:right; 
z-index:1000; 
} 

#menu a { 
color:#fff; 
text-decoration:none; 
} 

#menu > li { 
transition:width 2s, height 2s; 
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; 
/* Safari */padding: 13px 0px; 
background:#172322 none repeat scroll 0 0; 
cursor:pointer; 
float:left; 
position:relative; 
} 

#menu > li a:hover { 
color:#B0D730; 
} 

#menu .logo { 
background-color: #7cb7e3; 
width:87px; 
padding:0px; 
} 

/* sub-menus*/ 
#menu ul { 
padding:0px; 
margin:0px; 
display:block; 
display:inline; 
} 

#menu li ul { 
position:absolute; 
left:-24px; 
top:0px; 
margin-top:45px; 
line-height:16px; 
background-color:#172322; 
color:#0395CC; 
/* for IE */ display:none; 
} 

#menu li:hover ul { 
display:block; 
} 

#menu li ul li{ 
display:block; 
margin:5px 20px; 
padding: 5px 0px; 
list-style-type:none; 
} 

#menu li ul li:first-child { 
border-top: none; 
} 

#menu li ul li a { 
display:block; 
color:#0395CC; 
} 

#menu li ul li a:hover { 
color:#7FCDFE; 
} 

/* main submenu */ 
#menu #main li { 
text-align:center; 
margin:10px 10px 10px 10px!important 
} 

#menu #main { 
border-radius: 0px 0px 30px 30px; 
width:167px; 
left:0px; 
top:-20px; 
padding-top:20px; 
background-color:#7cb7e3; 
color:#fff; 
z-index:999; 
} 

/* search */ 
.searchContainer div { 
background-color:#fff; 
display:inline; 
padding:5px; 
} 

.searchContainer input[type="text"] { 
border:none; 
} 

.searchContainer ul { 
vertical-align:middle; 
} 

Answer 1

問題是，當屬性發生變化時，轉換會爲屬性設置動畫。例如，如果我有一個寬度爲100px的div，然後向它添加一個將其切換爲300px寬的類，則可以設置transition: width 3s，並且它會在3秒內增長。 在你的情況下，所有的變化是display:block/display:hidden 爲了讓它轉變，你需要改變的東西，而不是用display:hidden隱藏它，你通過縮小它來隱藏它真的很小， ，或改變不透明度等。