Анимировать диапазон от ширины 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-Navbar) .expand CSS пинки в и изменяет ширину от 0 до авто. Я в основном нуждаюсь в том же, но оживленном, но не могу понять это для жизни меня.

Может кто-нибудь указать мне в правильном направлении?

С наилучшими пожеланиями, Том

источник

2013-10-24 user282076

Вы не можете анимировать/авто, но вы можете установить максимальную ширину: 0px и оставить ширину: автоматически всегда (есть несколько ответов об этом решении) – vals

Вы не можете анимировать в auto с помощью CSS или родной Jquery (по крайней мере, когда я в последний раз проверил)

Существует метод JS/JQ хотя

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

источник

2013-10-24 19:06:51

Не копируйте-вставьте, что код без чтения комментариев, следующих за ним. Логика этого метода довольно проста, но довольно сложно реализовать. Создавая клон узла и устанавливая его ширину на 'auto', он будет ограничен родителем клона, а не родителем исходного узла, поэтому вам нужно быть очень осторожным. –

Анимировать диапазон от ширины 0 до авто

ответ

Смежные вопросы