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方法

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

动画范围从宽度0到自动

1 个答案: