如何为 Bootstrap 4 滑动下拉菜单设置动画？

Question

我是新来的，所以我希望我能尽可能清楚我的问题:-)

好的，我正在 Bootstrap 4 中处理一个相当简单的下拉菜单。有很多代码，因为我想控制它的各个方面，我布置它的方式相当混乱，因为这是测试阶段，但希望你会看到它相当容易了解正在发生的事情，因为我已经将评论放在任何地方并标记了所有内容！

我想使用 Animation 通过单击切换来上下滑动导航栏下拉菜单。 我在网上找到了一个使用过渡的演示，效果很好，但在移动设备上存在问题。 错误是如果您在 3 秒后单击按钮关闭，菜单会突然关闭而不是滑动关闭。 它的意思是每次都滑动关闭。 这似乎是我见过的示例中的一致错误。

因此，我正在尝试动画，它们可以做得更多，我可以对元素有更多的控制。

我已经弄清楚如何使用 animation 向下滑动菜单：

    CustomJQ('.dropdown').on('show.bs.collapse', function() {   // Dropdown Menu button is in the transition process of sliding down //

              CustomJQ(this).find(".dropdown-menu").first().removeClass('MonkeeClassAnimationDown')
              CustomJQ(this).find(".dropdown-menu").first().addClass('MonkeeClassAnimationDown')

    });

“MonkeeClassAnimationDown”是我的 animation class 并且每次都能很好地工作，不透明度淡入并向下滑动

Now the tricky part - I can't for the life me find the correct Bootstrap class or function to say, in Layman's terms: “When NavBar Menu Button is clicked again to toggle – remove the Animation Down class and add Animation Up class”. Up class 我已经准备好等待，我只是看不到如何应用它

这是链接：

http://tunedinevents.co.uk/__Testing/Top_NavBar_Dropdown_Menu/

http://tunedinevents.co.uk/__Testing/Top_NavBar_Dropdown_Menu/_CustomCSS

http://tunedinevents.co.uk/__Testing/Top_NavBar_Dropdown_Menu/_CustomJavascripts/CustomJS.js

如果有人破解了这个，可能甚至不需要查看代码…… 如果您知道 Bootstrap JS function，我可以在单击切换时应用我的 Up Animation，那就太好了！

希望我已经足够清楚了……谢谢:-)

Answer 1

我真的解决了我很高兴地说:-)

            // SUB DROPDOWN MENU TITLE BUTTONS //

            CustomJQ('.dropdown').on('show.bs.collapse', function() {   // Dropdown Menu button is in the transition process of sliding down //

             CustomJQ(this).find('.hide.bs.collapse').first().removeClass('MonkeeClassDelayClosingDropdownMenu');

              CustomJQ(this).on('.dropdown').addClass('MonkeeClassTopMenuMainButtonClick');  // Unhighlight the Sub Menu Title //

              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationUp');
              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationDown');
              CustomJQ(this).find('.dropdown-menu').first().addClass('MonkeeClassAnimationDown');

              CustomJQ('.MonkeeClassNavBarBackground').removeClass('peru orange yellow lime plum olive indigo');
              CustomJQ('.MonkeeClassNavBarBackground').addClass('olive');

            });

            CustomJQ('.dropdown').on('hide.bs.collapse', function() {  // Dropdown Menu button has just finished the process of sliding up //

              CustomJQ(this).find('.hide.bs.collapse').first().removeClass('MonkeeClassDelayClosingDropdownMenu');
              CustomJQ(this).find('.hide.bs.collapse').first().addClass('MonkeeClassDelayClosingDropdownMenu');

              CustomJQ(this).on('.dropdown').removeClass('MonkeeClassTopMenuMainButtonClick');  // Unhighlight the Sub Menu Title //

              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationUp');
              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationDown');
              CustomJQ(this).find('.dropdown-menu').first().addClass('MonkeeClassAnimationUp'); 

              CustomJQ('.MonkeeClassNavBarBackground').removeClass('peru orange yellow lime plum olive indigo');
              CustomJQ('.MonkeeClassNavBarBackground').addClass('plum');

            });