動畫div的寬度從像素到自動

我有一個包含li元素鏈接的水平導航div＃nav。我有一個.closed類讓我的div的寬度可以說100px，它只顯示第一個li。當我刪除.close我的div顯示我所有的鏈接。當我點擊第一個李並刪除課程時，div落入其正常寬度尺寸，這就是我想要的，這是很好的。但是，我怎樣才能讓它過渡或生氣蓬勃，而不是跳入原地？動畫div的寬度從像素到自動

<div id="nav" class="closed"> 
    <ul> 
    <li>Link 1: click Me</li> 
    <li>Link 2</li> 
    <li>Link 3</li> 
    </ul> 
</div>

來源

2014-03-07 user3376065

你能提供所有相關的代碼，也許是一個jsfiddle？！ –

[CSS過渡高度：0;到高度：自動;]（http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto） – cimmanon

只有最小寬度可能http://stackoverflow.com/questions/ 21750418/css3-height-transition-on-an-absolute-located-div-to-overflow-auto-failures/21750488＃21750488 – Mabedan

它看起來像問題是與該動畫需要一個終點的事實做，我必須定義我想要動畫的像素數。我試圖創建一個動態菜單來自行計算，我最終編寫了一個函數，該函數考慮鏈接元素之間的所有邊距和填充以及不同屏幕大小的更改。它會正確計算所需的像素，並將其插入到我的動畫代碼中。

來源

2014-04-12 00:40:07 user3376065

還有一種方法，請參閱我的答案 – iamnotsam

以下屬性添加到您的封閉類，

.closed 
{ 
-webkit-transition: all 0.6s ease-out; 
-moz-transition: all 0.6s ease-out; 
transition: all 0.6s ease-out; 
    }

來源

2014-03-07 17:26:18

好吧，似乎這隻會工作，如果我的div＃nav有一個設置寬度沒有。關閉。我不想定義像素，因爲導航鏈接將被服務器加載，我無法設置固定像素。 – user3376065

你可以展示jsfiddle嗎？ –

我相信這符合您的要求

http://jsbin.com/colar/5/edit?html,css,js,output

我做的toggleClass玩具實現，可以使用更復雜的JS

這裏是它的心臟

#nav{ 
    display: inline-block; 
    overflow: hidden; 
    background: pink; 
    max-width: 100%; 
    transition: all 1s ease-in-out; 
} 
#nav.closed { max-width: 100px; } 
#nav ul{ 
    padding: 0; 
    display: inline; 
    white-space: nowrap; 
} 
#nav li{ background: yellow; display: inline-block; cursor: pointer; width: 100px; }

來源

2014-04-12 04:17:01 iamnotsam

動畫div的寬度從像素到自動

回答

相關問題