動畫從寬度0到自動的跨度

我使用Bootstrap創建網站，並有一個菜單在菜單中顯示圖標。點擊菜單按鈕後，文本將會出現在每個圖標旁邊，並將菜單向左推，以便文本可以放入。動畫從寬度0到自動的跨度

<div id="wrapper"> 
     <div id="sidebar"> 
      <a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
     <div id="title-text"> 
      <a href="#section1" class="smoothScroll"><h3>Title</h3></a> 
     </div> 
      <!-- <div id="logo"> <a href="/"><img src="img/logo.svg" alt="logo" /></a> </div> --> 
      <nav id="nav" class="navigation" role="navigation"> 
       <ul class="newnav"> 
        <li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span></li> 
        <li data-section="2" class=""><i class="icon-user"></i> <span>About</li> 
        <li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span> </li> 
        <li data-section="4" class=""><i class="icon-pencil"></i> <span>Social</span> </li> 
        <li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span> </li> 
       </ul> 
      </nav><!-- /nav --> 
     </div><!-- /sidebar -->

目前，跨度擴展讓文本，它工作正常，但我希望它是動畫。

儘管實時視圖不起作用，但這是迄今爲止的大部分代碼。

JSFiddle

正如你可以看到，當左上角的按鈕被點擊（.btn-導航欄）的.expand CSS踢和從0變爲寬度爲自動。我基本上需要同樣的東西，但動畫，但無法解決我的生活。

請有人指出我在正確的方向嗎？

親切的問候，湯姆

來源

2013-10-24 user282076

您無法在auto中設置動畫效果，但您可以設置最大寬度：0px並保留寬度：auto始終（關於該解決方案有多個答案） – vals

使用CSS或本地jQuery的（至少在我最後一次檢查）

有雖然

http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/一個JS/JQ方法你不能動畫到auto

來源

2013-10-24 19:06:51

請勿複製粘貼代碼沒有讀取它後面的註釋。該方法背後的邏輯非常簡單，但很難實現。當創建一個節點的克隆並將其寬度設置爲'auto'時，它將受到克隆的父節點，而不是原節點的父節點的限制，因此您必須非常小心。 –

動畫從寬度0到自動的跨度

回答

相關問題