Javascript Bootstrap 4隐藏上的下拉列表不'；不要等待动画

我有一个代码笔来帮助解释： 基本上，我已经使用

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

---

任何帮助都会很好。

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

将animate.css添加到您的项目中（谷歌it人人都知道）

将动画类添加到下拉菜单中

使用以下Js：（show（）非常重要）

使用Bootstrap 4.3.1（当前最新版本）进行测试

---

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

将animate.css添加到您的项目中（谷歌it人人都知道）

将动画类添加到下拉菜单中

使用以下Js：（show（）非常重要）

使用Bootstrap 4.3.1（当前最新版本）进行测试

---

您不能这样使用它，因为在您单击hide Bootstrap后，会立即添加

display:none

。您可以在悬停（而不是单击）时使用这种方式。如果你想要悬停，我可以帮你。在Codepen.Oops中使用bootstrap4css和bootstrap3js文件，修复了这个问题。这也是我的想法，似乎是在点击时做的，但它是引导3。但是，无法使其与引导程序4配合使用。它也适用于BS4。（第一个下拉列表）谢谢！（非常感谢。）您不能这样使用它，因为在您单击hide Bootstrap后，会立即添加

display:none

。您可以在悬停（而不是单击）时使用这种方式。如果你想要悬停，我可以帮你。在Codepen.Oops中使用bootstrap4css和bootstrap3js文件，修复了这个问题。这也是我的想法，似乎是在点击时做的，但它是引导3。但是，无法使其与引导程序4配合使用。它也适用于BS4。（第一个下拉列表）谢谢！（非常感谢。）

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