首页 文章

动画范围从宽度0到自动

提问于
浏览
0

我正在使用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 -->

目前, Span 扩展到让文本进入,它工作正常,但我希望它是动画的 .

这是目前为止的大部分代码,尽管实时视图不起作用 .

JSFiddle

如您所见,当单击左上角按钮(.btn-navbar)时,.expand CSS启动并将宽度从0更改为auto . 我基本上需要同样的东西,但动画,但无法弄清楚我的生活 .

有人能指出我正确的方向吗?

亲切的问候,汤姆

1 回答

相关问题