javascript - Bootstrap 4 隐藏下拉菜单不等待动画

Question

我有一个codepen可以帮助解释:http://codepen.io/anon/pen/oLZOyp基本上，我使用 animate.css 添加了两个动画到 Bootstrap 4 show.bs.dropdown 和 hide.bs.dropdown，它适用于第一个 show.bs.dropdown，但不适用于 hide。

$(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');
  })
});

任何帮助都会很棒。

Answer 1

无需使用幻灯片或其他解决方法这是一个简单的解决方案:

1. 将 animate.css 添加到您的元素中(google 一下大家都知道)
2. 将动画类添加到您的下拉菜单

3. 使用下面这段Js:(show()非常重要)

   $('.dropdown').on('show.bs.dropdown', function(e){
       $(this).find('.dropdown-menu').removeClass('lightSpeedOut').addClass('lightSpeedIn').show();
   });
   
   $('.dropdown').on('hide.bs.dropdown', function(e){
       $(this).find('.dropdown-menu').removeClass('lightSpeedIn').addClass('lightSpeedOut');
   });
   

   使用 Bootstrap 4.3.1(当前最新)进行测试