Плавная анимация закрытия в мобильном меню выпадающего меню Bootstrap

Question

У меня есть выпадающие списки в окне Bootstrap 3 navbar-collapse, которые я хочу анимировать плавно при открытии и закрытии. Как решения JavaScript, так и CSS animation, которые я нашел, отлично работают при просмотре на устройстве большей ширины. Но когда он рухнул на мобильном телефоне, закрытие выпадающего списка выглядит ужасно. Пока он рушится, он возвращается к стандартным раскрывающимся спискам.

In this JSFiddle, попробуйте сделать окно вывода узким, чтобы меню рушилось в мобильном режиме. Затем нажмите значок «гамбургер» и откройте и закройте раскрывающийся список «Some Stuff». Как вы можете видеть, он отлично выглядит при открытии, но ужасно, когда закрывается. Я пробовал много возиться безрезультатно. Любая идея о том, как это можно сделать гладким в режиме мобильной связи?

ПРИМЕЧАНИЕ: Я предпочитаю ответ CSS, но я буду использовать JavaScript, если это то, что он требует.

HTML

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 
     <li> 
      <div class="navbar-nav-divider"></div> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="margin-bottom: 0;"> 
          Some Stuff <span class="caret"></span> 
         </a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Option 1</a></li> 
      <li><a href="#">Option 2</a></li> 
      <li><a href="#">Option 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

CSS

.dropdown .dropdown-menu { 
    -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 

    max-height: 0; 
    display: block; 
    overflow: hidden; 
    opacity: 0; 
    visibility: hidden; 
} 

.dropdown.open .dropdown-menu { 
    -webkit-transition: max-height 0.3s, opacity 0.2s, visibility 0s; 
    -moz-transition: max-height 0.3s, opacity 0.2s, visibility 0s; 
    -ms-transition: max-height 0.3s, opacity 0.2s, visibility 0s; 
    -o-transition: max-height 0.3s, opacity 0.2s, visibility 0s; 
    transition: max-height 0.3s, opacity 0.2s, visibility 0s; 

    max-height: 120px; 
    opacity: 1; 
    visibility: visible; 
} 

---

EDIT:

я могу обойти эту проблему, пропуская близко анимации в то время как в мобильном режиме, так что это, по крайней мере Безразлично» t выглядят ужасно. Тем не менее, я не рассматриваю это решение, просто обходное решение. Чтобы осуществить это, я сделал первый из двух моих CSS блоков выглядеть следующим образом, вместо:

.dropdown .dropdown-menu { 
    max-height: 0; 
    display: block; 
    overflow: hidden; 
    opacity: 0; 
    visibility: hidden; 
} 
@media (min-width: 768px) { 
    .dropdown .dropdown-menu { 
    -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    } 
} 

Answer 1

использовать @ AndrewBone, если у вас нет доступа к Bootstrap 3 МЕНЬШЕ исходного кода, так как его ответ подключи и работай. Мой ответ несколько более впечатляющий, так как он добавляет очень мало CSS, делая лишь небольшую модификацию стиля «root».

Шаги:

1. Перейти к navbar.less.
2. Найдите все ссылки селектора .open .dropdown-menu и удалите из него .open, так что селектор говорит только .dropdown-menu. Это позволит использовать CSS для раскрывающегося списка мобильных устройств при его открытии и закрытия.

Это решает проблему стилизации/анимации, но оставляет за собой зазор из-за заполнения в элементе ul.dropdown-menu. Мы разрешим это, получив нулевое дополнение на ul только тогда, когда оно не будет открыто (:not(.open) .dropdown-menu) и анимирует это дополнение, чтобы оно не выглядело неустойчивым.

3. Замените пользовательский CSS в вопросе следующим.

   .navbar-nav .dropdown-menu { 
       -webkit-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; 
       -moz-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; 
       -ms-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; 
       -o-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; 
       transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; 
       max-height: 0; 
       display: block; 
       overflow: hidden; 
       opacity: 0; 
       visibility: hidden; 
   } 
   .navbar-nav .dropdown.open .dropdown-menu { 
       -webkit-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; 
       -moz-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; 
       -ms-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; 
       -o-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; 
       transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; 
       max-height: 120px; 
       opacity: 1; 
       visibility: visible; 
   } 
   .navbar-nav .dropdown:not(.open) .dropdown-menu { 
       padding: 0 !important; 
   } 
   

И это все! Теперь у нас есть гладкие анимации CSS в мобильных и полноэкранных режимах с минимальным дополнительным CSS, который необходимо обработать.

Answer 2

Добавьте это в CSS поэтому сохраняет свои стили, даже когда она закрыта.

@media (max-width: 767px) { 
    .navbar-nav .dropdown-menu { 
    position: static; 
    float: none; 
    width: auto; 
    margin-top: 0; 
    background-color: transparent; 
    border: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    } 
    .navbar-nav .dropdown-menu>li>a { 
    padding: 5px 15px 5px 25px; 
    color: #777; 
    } 
} 

Здесь в действии раствор (Fiddle)