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

Question

I'm new on here so I hope I can be as clear as possible with my problem:-)

OK so, I'm working on a fairly simple dropdown menu in Bootstrap 4. There's quite a lot of code because I'm wanting to control every aspect of it, the way I've laid it out is fairly messy because this is testing phase, but hopefully you'll see it's fairly easy to get what's going on because I've put comments everywhere and labelled everything !

I'd like to use Animation to slide the NavBar Dropdown menu up and down with a toggle click. I found a demo online using transitions, which works fairly well but is buggy on mobile. The bug is that if you click the button to close after 3 seconds, the menu snaps shut instead of sliding shut. It's meant to slide shut every time. This seems to be a consistent bug from the examples I've seen.

Therefore I'm trying out Animations instead, they can do more and I can have even more control over elements.

I've worked out how to use an animation to slide down the menu:

    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” is my animation class and works beautifully every time, opacity fades in and it slides down

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”. The Up class I have ready and waiting, I just can't see how to apply it

Here's the links:

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

If anyone has cracked this, probably don't even need to view code…. if you know the Bootstrap JS function that I can apply my Up Animation when toggle clicked, that'd be great !

Hope I've been clear enough… thanks:-)

Answer 1

I actually worked it out I'm pleased to say:-)

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

            });