动画从宽度 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 更改为自动。我基本上需要同样的东西，但动画但无法为我的生活弄明白。

请有人指出我正确的方向吗？

亲切的问候， 汤姆

Answer 1

您不能使用 CSS 或原生 Jquery 为 auto 制作动画（至少在我上次检查时）

虽然有 JS/JQ 方法

http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/