title: Bootstrap 4 Dropdown on hide doesn't wait for animation
body: <p>I have a codepen to help explain: <a href="http://codepen.io/anon/pen/oLZOyp" rel="nofollow">http://codepen.io/anon/pen/oLZOyp</a>
  Basically, I've added two animations using <code>animate.css</code> to Bootstrap 4 show.bs.dropdown and hide.bs.dropdown, it works on the first show.bs.dropdown but not on hide.</p>
  
  <pre><code>$(document).ready(function() {
    //animate css function
    $.fn.extend({
      animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
          $(this).removeClass('animated ' + animationName);
        });
      }
    });
  
  
    $('.dropdown').on('show.bs.dropdown', function () {
      $(this).find('.dropdown-menu').first().stop(true, true).animateCss('flipInX');
    })
  
    $('.dropdown').on('hide.bs.dropdown', function () {
      $(this).find('.dropdown-menu').first().stop(true, true).animateCss('flipOutX');
    })
  });
  </code></pre>
  
  <p>Any help would be great.</p>