Как разместить анимацию в Dropmenu с помощью CSS? - PullRequest
Новая
       5

Как разместить анимацию в Dropmenu с помощью CSS?

0 голосов
/ 29 сентября 2018 

/*.dropdownMenuLista {
  -webkit-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
  -moz-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
  -ms-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
  -o-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
  transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
  max-height: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.dropdownMenu {
  -webkit-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -moz-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -ms-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -o-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  max-height: 290px;
  opacity: 1;
  visibility: visible;
  padding: 0;
}*/

ul.ulDropMenu{
        float: left;
    }
    ul.ulDropMenu li{
        float: left;
        list-style: none;
        position: relative;
    }
    ul.ulDropMenu li a{
        display: block;
        padding: 9px 14px;
    }
    ul.ulDropMenu li ul{
        display: none;
        position: absolute;
        background-color: #fff;
        border-radius: 4px;
        padding: 8px;
    }
    ul.ulDropMenu li:hover ul{
        display: block;
    }
    ul.ulDropMenu li ul li{
        width: 120px;
    }
    ul.ulDropMenu li ul li a{
        padding: 6px 14px;
        color: #2A2A2A;
    }
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <ul class="ulDropMenu">

      <li class="pr-5 dropdownMenu">

        <a class="nav-link" id="navbarDropdown" aria-haspopup="true" aria-expanded="false" role="button" data-toggle="dropdown" style="transition: color .4s;" href="#">Drop Menu
        <i class="fa fa-caret-down"></i>
          
        </a>

          <ul class="dropdownMenuLista">                     

            <li aria-labelledby="navbarDropdown">
              <a style="transition: color .4s;" href="#">items</a>
              <a style="transition: color .4s;" href="#">items</a>
              <a style="transition: color .4s;" href="#">items</a>
            </li>

          </ul>

      </li>

    </ul>

Как поместить анимацию с transition в это выпадающее меню?У меня есть этот код, который должен поместить анимацию в выпадающее меню, но он не работает.

Когда я добавляю классы dropdownMenuLista и dropdownMenu, Dropmenu перестает работать.

Яс помощью начальной загрузки, но я не хочу использовать выпадающее меню JS из начальной загрузки.Мне нужна CSS версия выпадающего меню для некоторых целей .....

1 Ответ

0 голосов
/ 29 сентября 2018

Все это можно было бы много очистить, но это не объяснило бы вам, что не так, поэтому я изменю только то, что необходимо.

Основная проблема заключается в том, что вы не можете оживить изmax-height от display: none до display: block, потому что для неблокированных элементов max-height нет.

Таким образом, нам нужно убрать переключение с display на ul.ulDropMenu li:hover ul (. dropdownMenuLista)элемент и показать / скрыть другим способом.Так как он скрыт в классе .dropdownMenuLista, реквизитами max-height, opacity и visibility необходимо включить их при наведении.

Кроме того, ваша анимация видимости составляла 4 секунды, а другие - <1 сек.,Таким образом, возможно, видимые анимации будут проходить до того, как элемент станет видимым через 4 секунды. </p>

Все изменения помечаются комментариями в фрагменте. 

.dropdownMenuLista {
  -webkit-transition: max-height 1s, opacity 0.2s 0.1s;
  -moz-transition: max-height 1s, opacity 0.2s 0.1s;
  -ms-transition: max-height 1s, opacity 0.2s 0.1s;
  -o-transition: max-height 1s, opacity 0.2s 0.1s;
  transition: max-height 1s, opacity 0.2s 0.1s;
  
  /* removed visibility animation */
  
  max-height: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.dropdownMenu {
  -webkit-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -moz-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -ms-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -o-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  max-height: 290px;
  opacity: 1;
  visibility: visible;
  padding: 0;
}

ul.ulDropMenu{
        float: left;
    }
    ul.ulDropMenu li{
        float: left;
        list-style: none;
        position: relative;
    }
    ul.ulDropMenu li a{
        display: block;
        padding: 9px 14px;
    }
    ul.ulDropMenu li ul{
       /* display: none; - cannot animate */
        
        position: absolute;
        background-color: #fff;
        border-radius: 4px;
        padding: 8px;
    }
    ul.ulDropMenu li:hover ul{
        /*  display: block; - cannot animate */
      
        
        /* show by enabling all props that
        hide this element in .dropdownMenuLista
        style */
        max-height: 290px;
        visibility: visible;
        opacity: 1;      
    }
    ul.ulDropMenu li ul li{
        width: 120px;
    }
    ul.ulDropMenu li ul li a{
        padding: 6px 14px;
        color: #2A2A2A;
    }
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <ul class="ulDropMenu">

      <li class="pr-5 dropdownMenu">

        <a class="nav-link" id="navbarDropdown" aria-haspopup="true" aria-expanded="false" role="button" data-toggle="dropdown" style="transition: color .4s;" href="#">Drop Menu
        <i class="fa fa-caret-down"></i>
          
        </a>

          <ul class="dropdownMenuLista">                     

            <li aria-labelledby="navbarDropdown">
              <a style="transition: color .4s;" href="#">items</a>
              <a style="transition: color .4s;" href="#">items</a>
              <a style="transition: color .4s;" href="#">items</a>
            </li>

          </ul>

      </li>

    </ul>
...