Анимировать ширину div, переходя от пикселей к авто

0

У меня есть горизонтальный навигационный div # nav, который содержит ссылки на li-элементы. У меня есть.closed класс, который дает мой div шириной let say 100px, который показывает только первый li. Когда я удаляю.close, мой div показывает все мои ссылки li. Когда я нажимаю на первый li и удаляю класс, div падает в свой обычный размер ширины и что я хочу, что хорошо. Но как я могу сделать переход или оживить, а не прыгать на место?

<div id="nav" class="closed">
  <ul>
     <li>Link 1: click Me</li>
     <li>Link 2</li>
     <li>Link 3</li>
  </ul>
</div>
Показать ещё 1 комментарий
Теги:
sass

3 ответа

0
Лучший ответ

Похоже, проблема связана с тем, что анимация требует конечной точки, я должен определить, сколько пикселей я хочу оживить. Я пытался создать динамическое меню, которое бы само по себе вычисляло, в итоге я написал функцию, которая учитывает все поля и прокладки между элементами ссылки, а также изменения для разных размеров экрана. Он правильно вычислил нужные пиксели и введет их в код анимации для меня.

Поделиться
  • 0
    Есть другой способ, смотрите мой ответ
0

Я считаю, что это соответствует вашим требованиям

http://jsbin.com/colar/5/edit?html,css,js,output

Я выполняю игру игрушек toggleClass, вы можете использовать более сложные JS

Вот его сердце

#nav{
  display: inline-block;
  overflow: hidden;
  background: pink;
  max-width: 100%;
  transition: all 1s ease-in-out;
}
#nav.closed { max-width: 100px; }
#nav ul{
  padding: 0;
  display: inline;
  white-space: nowrap;
}
#nav li{ background: yellow; display: inline-block; cursor: pointer; width: 100px; }
Поделиться
0

Добавьте следующие свойства в закрытый класс,

 .closed 
 {
 -webkit-transition: all 0.6s ease-out;
 -moz-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
  }

Подробнее читайте здесь http://www.w3schools.com/css/css3_transitions.asp

Поделиться
  • 0
    Хорошо, похоже, это будет работать, только если у моего div # nav заданная ширина без .closed. Я не хочу определять пиксели, так как навигационные ссылки будут загружаться сервером, и я не могу установить фиксированный пиксель.
  • 0
    Вы можете показать jsfiddle?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню