Question

我试图让Clickstrap 4 Dropdown在点击时淡入，但是我无法通过使用过渡来实现这个结果：

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

谢谢！

Answer 1

这是Bootstrap 4中下拉列表的工作淡入淡出过渡：

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

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

信用：https://stackoverflow.com/a/47986695/1821637

Answer 2

.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;
 }

当我在悬停上寻找类似的东西时在互联网上找到了这个

Answer 3

您可以尝试此操作。它还将适用于所有移动设备

`@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 个答案: