How to animate the toggle action of a dropdown menu?

Wappler General Need Help
1

How can the toggle action of a dropdown be animated?
For example to smoothly slide it down instead of just making it visible in 1 ms on click on the dropdown toggle element?

2

Are you referring to a select menu or to a navigation dropdown menu item?

3

To a navigation dropdown.

4

The navigation dropdowns are not animated in Bootstrap 4 - they are just shown by changing the display attribute. You can add whatever CSS animation to them you wish as on any other element.

A simple example:

    @media (min-width: 992px) {
      .dropdown-menu {
        animation-duration: 0.4s;
        -webkit-animation-duration: 0.4s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
        -webkit-animation-name: slideIn;
        animation-name: slideIn;
      }
    }

    @keyframes slideIn {
      0% {
        transform: translateY(1rem);
        opacity: 0;
      }

      100% {
        transform: translateY(0rem);
        opacity: 1;
      }

      0% {
        transform: translateY(1rem);
        opacity: 0;
      }
    }

    @-webkit-keyframes slideIn {
      0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
      }

      100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
      }

      0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
      }
    }
1 Like
5

Thanks Teodor, going to play with this (for me) advanced CSS :slight_smile: