html - 如何使引导下拉菜单过渡不透明

Question

我想让 Bootstrap 中的下拉菜单淡入而不是立即弹出。

我已经尝试这样做以使其工作，但它只会在我将鼠标悬停在下拉菜单上时淡入(在我这样做之前它是不可见的，即使选择了下拉按钮也是如此):

.nav-pills > li > a { border: 1px solid #242323 }
.nav-pills > li.active > a,
.nav-pills > li > a:hover, .nav-pills > li > a:focus,
.nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #00BFFF;
  background-color: #242323;
  border: 1px solid #00BFFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav-pills .open > a, .nav-pills .open > a:hover, .nav-pills .open > a:focus {
  background-color: #242323;
  border: 1px solid #00BFFF;
  color: #00BFFF;
}

.blog-top > .align-left > .nav > .dropdown > .dropdown-menu > li > a { color: #E0E0E0 }
.blog-top > .align-left > .nav > .dropdown > .dropdown-menu > li:hover > a {
  color: #00BFFF;
  background-color: #404040;
}

.blog-top > .align-left > .nav > .dropdown > .dropdown-menu {
  background-color: #242323;
  border: 1px solid #00BFFF;
  opacity: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: .25s, transform .25s ease;
  -moz-transition: .25s, transform .25s ease;
  -webkit-transition: .25s, transform .25s ease;
}

.blog-top > .align-left > .nav > .dropdown > .dropdown-menu:hover { opacity: 1 }

[aria-expanded=true].dropdown-toggle + ul.dropdown-menu { opacity: 1 }

我也尝试过将 opacity: 1; 放在单个 a:focus 元素上，但这似乎没有帮助。

这是 HTML 的示例:

<div class="blog-top">
  <div class="align-left">
    <ul class="nav nav-pills">

      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">MENU <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li role="presentation"><a href="#">Item</a></li>
          <li role="presentation"><a href="#">Item</a></li>
          <li role="presentation"><a href="#">Item</a></li>
        </ul>
      </li>

    </ul>
  </div>
</div>

Answer 1

将它们设置为 opacity: 0 和 visiblity:hidden 或 z-index: -1 默认 .

然后，在悬停和使用 css 过渡时，将它们设置为 opacity: 1 和 visibility:visible 或 z-index: 1。

顺便说一句，直接子选择器 (>) 过于具体。您不应该每次都使用它。

这是一个代码片段。看这个jsfiddle看到它与 Bootstrap 3 一起工作。

.nav-pills li a {
  border: 1px solid #242323
}

.nav-pills li.active > a,
.nav-pills li a:hover,
.nav-pills li a:focus,
.nav-pills li.active a:hover,
.nav-pills li.active a:focus {
  color: #00BFFF;
  background-color: #242323;
  border: 1px solid #00BFFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav-pills .open a,
.nav-pills .open a:hover,
.nav-pills .open a:focus {
  background-color: #242323;
  border: 1px solid #00BFFF;
  color: #00BFFF;
}

.nav .dropdown-menu li a {
  color: #E0E0E0
}

.nav .dropdown-menu li:hover a {
  color: #00BFFF;
  background-color: #404040;
}

.nav .dropdown .dropdown-menu {
  background-color: #242323;
  border: 1px solid #00BFFF;
  opacity: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: .25s, transform .25s ease;
  -moz-transition: .25s, transform .25s ease;
  -webkit-transition: .25s, transform .25s ease;
  display: block;
  visibility: hidden;
}

[aria-expanded=true].dropdown-toggle + ul.dropdown-menu,
.nav .dropdown .dropdown-menu.show {
  visibility: visible;
  opacity: 1
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blog-top">
  <div class="align-left">
    <ul class="nav nav-pills">

      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">MENU <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li role="presentation"><a href="#">Item</a></li>
          <li role="presentation"><a href="#">Item</a></li>
          <li role="presentation"><a href="#">Item</a></li>
        </ul>
      </li>

    </ul>
  </div>
</div>