如何使用 CSS 在下拉菜单上放置动画？

debugcn 发表于 Dev

心态

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

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

雅安·奥拉斯

整个事情可以清理很多，但这样做不会向你解释什么是错的，所以我只会改变必要的东西。

这里的核心问题是你不能从max-heightofdisplay: none到动画display: block，因为没有max-height用于非块项目。

因此，我们需要删除开关display的ul.ulDropMenu li:hover ul（. dropdownMenuLista）元素和显示/隐藏一些其他的方式。由于它隐藏在.dropdownMenuLista类，由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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。