Bootstrap 4 - Dropdown Fade In Transition

Question

I'm trying to make the Bootstrap 4 Dropdown fade in when clicked, however I am unable to achieve this result with using transitions:

.dropdown-menu {
    -webkit-transition: 0.25s;
    transition: 0.25s;
}

Thanks!

I bet you'll find out soon enough whether or not you're wrong. :-) — WebDevBooster, Mar 18 '18 at 20:05
Possible duplicate of [Adding a slide effect to bootstrap dropdown](https://stackoverflow.com/questions/12115833/adding-a-slide-effect-to-bootstrap-dropdown) — Bryan Dellinger, Mar 18 '18 at 21:16

score 2 · Answer 1 · answered Mar 14 '19 at 19:04

.dropdown .dropdown-menu{
    display: block; 
    opacity:0;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
 }
 .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
 }

Found this on the internet when I was looking for something similar on hover

Máster · Answer 2 · 2018-05-16T17:30:27.417

1

This is a working fade transition for dropdown in Bootstrap 4:

.dropdown-menu.fade {
   display: block;
   opacity: 0;
   pointer-events: none;
}

.show > .dropdown-menu.fade {
   pointer-events: auto;
   opacity: 1;
}

Credit: https://stackoverflow.com/a/47986695/1821637

edited May 16 '18 at 17:30

answered May 16 '18 at 17:21

Máster

981
11
23

score 0 · Answer 3 · answered Nov 27 '19 at 19:33

you can try this. it will also work all the mobile devices

`@include media-breakpoint-up(xl) {
  .dropdown-on-hover {
    &.dropdown {
      .dropdown-menu{
        display: block; 
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s linear;}
      @include hover-focus {
        .dropdown-menu {
          visibility: visible;
          opacity: 1;
        }
      }
    }
  }
}`

Bootstrap 4 - Dropdown Fade In Transition

3 Answers3