title: add smooth transition down on bootstrap dropdown
body: <p>I'm using bootstrap 3 on angularjs. Not sure what I'm missing. When I click it, it doesn't slide down/up smoothly but rather gets displayed quickly. I'm trying to achieve an effect similar to the accordion.</p>
  
  <pre><code>&lt;li class="dropdown" id="printerAnalyticsMenu"&gt;
      &lt;a href="#" class="dropdown-toggle"&gt;
          &lt;i class="fa fa-bar-chart-o"&gt;&lt;/i&gt;
          &lt;span class="hidden-xs"&gt;Printer Analytics&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a class="ajax-link" ui-sref="main.odometer"&gt;Odometers&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="ajax-link" href="#"&gt;Real Time Print Job&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="ajax-link" href="#"&gt;Battery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="ajax-link" href="#"&gt;Printhead&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p></li></p>
  
  <p>and the css</p>
  
  <pre><code>li#printerAnalyticsMenu &gt; ul &gt; li {
      /* this will apply to inner UL, adapt to your desired selector */
      -webkit-transition: height 0.3s ease-in-out;
      -o-transition: height 0.3s ease-in-out;
      -moz-transition: height 0.3s ease-in-out;
      transition: height 0.3s ease-in-out;
  }
  </code></pre>