title: Smooth closing animation in mobile Bootstrap menu drop-down
body: <p>I have drop-down lists in a Bootstrap 3 navbar-collapse that I want to animate smoothly upon opening and closing. Both the <a href="https://stackoverflow.com/a/19339162/4028303">JavaScript</a> and <a href="https://stackoverflow.com/a/32233048/4028303">CSS animation</a> solutions I found work great when viewing on a larger-width device. But when it's collapsed in mobile, closing a drop-down list looks awful. While it's collapsing, it goes back to looking like a standard drop-down list.</p>
  
  <p><a href="https://jsfiddle.net/stamminator/nvbfkjrL/" rel="nofollow noreferrer">In this JSFiddle</a>, try making the output window narrow so the menu collapses to mobile mode. Then, click the "hamburger" icon and open and close the "Some Stuff" drop-down. As you can see, it looks great when opening, but awful when closing. I've tried a lot of tinkering to no avail. Any idea on how this can be made smooth while in mobile mode?</p>
  
  <p><strong>NOTE:</strong> I prefer a CSS answer, but I'll use JavaScript if that's what it requires.</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
            &lt;div class="navbar-nav-divider"&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="margin-bottom: 0;"&gt;
                              Some Stuff &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <hr>
  
  <h1>EDIT:</h1>
  
  <p>I can get around this by skipping the close animation while in mobile mode, so it at least doesn't look horrible. However, I'm not considering it a solution, just a workaround. To implement it, I made the first of my two CSS blocks look like this instead:</p>
  
  <pre><code>.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;
    }
  }
  </code></pre>