设置从宽度0到自动的跨度动画

Question

我正在使用Bootstrap创建一个网站，并有一个菜单，在菜单中显示图标。单击菜单按钮时，文本将移到每个图标旁边，并将菜单向左推，以便文本适合。

<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-navbar)时，.expand CSS生效并将宽度从0更改为auto。我基本上需要同样的东西，但动画，但无法弄清楚它为我的生活。

请给我指个方向好吗？

好的问候，汤姆

Answer 1

你不能使用CSS或者原生Jquery来动画auto (至少在我上次检查的时候是这样)

不过，有一个JS/JQ方法