title: Bootstrap dropdown-menu display:none after finish animation
body: <p>I have one button as drop-down menu and animation to show and hide dropdown.
  How to check animation is finish and add style display:none to dropdown-menu</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.open&gt;.dropdown-menu.dropdown-info {
    opacity: 1;
    left: 0px;
  }
  
  .dropdown-menu.dropdown-info {
    display: block;
    position: absolute;
    top: 70px;
    left: 30px;
    opacity: 0;
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
    &lt;button class="btn btn-default dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;
          Dropdown
          &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/button&gt;
    &lt;ul class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
      &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>