如何修复 CSS 下拉列表动画？

Question

我的dropdown 列表动画有问题。出于某种原因，它仅对 ul 列表中的文本而不是整个列表项块进行动画处理。

How it should work

Incorrect code

li:hover > ul.dropdown-content a:nth-child(1) {
    animation-name: menu1;
    animation-duration: 300ms;
    animation-delay: 0ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

li:hover > ul.dropdown-content a:nth-child(2) {
    animation-name: menu1;
    animation-duration: 300ms;
    animation-delay: 50ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

li:hover > ul.dropdown-content a:nth-child(3) {
    animation-name: menu1;
    animation-duration: 300ms;
    animation-delay: 100ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes menu1 {
    0% {
        opacity: 0;
        transform: rotateY(-90deg) translateY(30px);
    }
    80% {
        transform: rotateY(10deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg) translateY(0px);
    }

Answer 1

这是因为您为 ul 添加了一个不透明背景，并为其中的元素添加了一个透明，因此动画效果很好但您看不到它。

你应该做相反的事情，所以你必须从ul移除背景和盒子阴影：

.dropdown-content {
    ..
    background-color: transparent;
    box-shadow: none;
    overflow:visible; /* to see the box-shadow of its childs */
    ...
}

然后在内部元素上制作它们：

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    background: #fff;
    box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.3);
}

完整代码：

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #666;
  -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
}

li {
  float: left;
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #111;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 100px;
  -webkit-box-shadow: none;
  box-shadow: none;
  overflow:visible;
}

.dropdown-content a {
  color: black;
  background: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.3);
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
  cursor: pointer;
  z-index: 100;
}

li a:hover.active {
  background-color: #4CAF50;
}

.active {
  background-color: #0ed64d;
}

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

#banner {
  width: 100%;
  height: 273px;
  background-color: gray;
  overflow: hidden;
}

#nav_bar {
  border: 0;
  background-color: #202020;
  border-radius: 0px;
  margin-bottom: 0;
  z-index: 100;
}

li:hover>ul.dropdown-content {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

li:hover>ul.dropdown-content a {
  opacity: 0;
}

li:hover>ul.dropdown-content a:nth-child(1) {
  -webkit-animation-name: menu1;
  animation-name: menu1;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-delay: 0ms;
  animation-delay: 0ms;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li:hover>ul.dropdown-content a:nth-child(2) {
  -webkit-animation-name: menu1;
  animation-name: menu1;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-delay: 50ms;
  animation-delay: 50ms;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li:hover>ul.dropdown-content a:nth-child(3) {
  -webkit-animation-name: menu1;
  animation-name: menu1;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes menu1 {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg) translateY(30px);
    transform: rotateY(-90deg) translateY(30px);
  }
  80% {
    -webkit-transform: rotateY(10deg);
    transform: rotateY(10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateY(0px);
    transform: rotateY(0deg) translateY(0px);
  }
}

@keyframes menu1 {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg) translateY(30px);
    transform: rotateY(-90deg) translateY(30px);
  }
  80% {
    -webkit-transform: rotateY(10deg);
    transform: rotateY(10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateY(0px);
    transform: rotateY(0deg) translateY(0px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='nav_bar'>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <ul class="dropdown-content">
      <a>Link 1</a>
      <a>Link 2</a>
      <a>Link 3</a>
    </ul>
  </li>
  <li style="float:right"><a href="#news">About</a></li>
</ul>
<div class='div' style="z-index:1;padding:20px;;background-color:#1abc9c;height:1500px;">


  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

Answer 2

您不必在 .dropdown-content 上应用背景和框阴影

.dropdown-content
  display: none
  position: absolute
  background-color: transparent
  min-width: 100px  
  box-shadow: unset