css3轉換手風琴菜單

我做了一個替代選擇表格控件的手風琴菜單，並且我想使用css3轉換使它順利地展開/收縮。
下面是對的jsfiddle鏈接：http://jsfiddle.net/hKsCD/4/css3轉換手風琴菜單

爲了達到預期的效果，我需要動畫的每個環節的高度，但我不知道該怎麼做。 CSS3轉換很混亂。 O_O

2012-04-29 Ruby

.accordion { 
    height: 20px; /*define height to start from*/ 
    transition: height 2s; 
    -moz-transition: height 2s; /* Firefox 4 */ 
    -webkit-transition: height 2s; /* Safari and Chrome */ 
    -o-transition: height 2s; /* Opera */ 
} 
.accordion.expanded { 
    height: 400px;/*desired height when expanded*/ 
}

你必須要小心，雖然當高度從一個元素的不同而不同，你應該使用在這些情況下，最大寬度解決方法，因爲「高度：汽車」將無法正常工作。

例如將上例中的height替換爲max-height，並將擴展狀態集max-height替換爲元素永遠不會達到的元素（不是太高，儘管動畫的速度是根據要動畫的高度計算的 - >最大寬度也是如此高（例如9999px）導致動畫速度如此之快以至於您不會注意到它）

來源

2012-04-30 07:09:34 Peter

每個手風琴將有不同數量的選項，因此具有不同的高度。我嘗試過使用最大高度，但這不起作用，因爲當擴展類被移除時，所有選項（元素）立即消失。轉換需要應用於所有選項而不是菜單本身。我嘗試在選項上應用高度過渡，但不是動畫。這是我的嘗試：http://jsfiddle.net/hKsCD/5/ – Ruby

在玩了一番之後，我明白了。它只需要一點點光澤。 http://jsfiddle.net/hKsCD/6/ 謝謝你的幫助。 – Ruby

css3轉換手風琴菜單

回答

相關問題