如何使用 CSS 在 dropmenu 上放置动画？

Question

/*.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 时，下拉菜单停止工作。

我正在使用 bootstrap，但我不想使用 bootstrap 中的 JS 下拉菜单。出于某些目的，我需要一个 CSS 版本的下拉菜单.....

Answer 1

整个事情可以清理很多，但是这样做并不能向你解释哪里出了问题，所以我只会改变必要的地方。

这里的核心问题是您无法从 display: none 的 max-height 到 display: block 设置动画，因为没有 max-height 用于非块项目。

因此我们需要移除 display 或 ul.ulDropMenu li:hover ul(. dropdownMenuLista) 元素和 show/hide 其他方式的切换。由于它隐藏在 .dropdownMenuLista class 中，通过 max-height、opacity 和 visibility 属性，我们需要在悬停时启用它们。

此外，您的可见性动画为 4 秒，而其他人则不到 1 秒。因此，可能可见的动画会运行在元素实际在 4 秒后变得可见之前完成。

所有更改都在代码段中标有注释。

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

如何使用 CSS 在 dropmenu 上放置动画？

How to put a animation on dropmenu using CSS?

html

css

css-transitions