Как сделать непрозрачность перехода при начальной загрузке

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

Использовать animate.css - хорошо работает с Bootstrap. https://daneden.github.io/animate.css/

Answer 2

Установите их на 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>