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

Posted 2023-03-07

【中文标题】如何修复 CSS 下拉列表动画？

【英文标题】：How do I fix CSS dropdown list animation?

【发布时间】：2018-06-13 00:38:35

【问题描述】：

我的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);
    

【参考方案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>

【参考方案2】：

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

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