如何為 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');

            });