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

时间：2018-01-03 10:36:28

标签： jquery html css sass

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

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：-1)

您不必在.dropdown-content

上应用背景和框阴影 
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610
1, 1, 2, 4, 7, 13, 24, 44, 81, 149, 274, 504, 927, 1705, 3136
1, 1, 2, 4, 8, 15, 29, 56, 108, 208, 401, 773, 1490, 2872, 5536
1, 1, 2, 4, 8, 16, 31, 61, 120, 236, 464, 912, 1793, 3525, 6930
1, 1, 2, 4, 8, 16, 32, 63, 125, 248, 492, 976, 1936, 3840, 7617
1, 1, 2, 4, 8, 16, 32, 64, 127, 253, 504, 1004, 2000, 3984, 7936
1, 1, 2, 4, 8, 16, 32, 64, 128, 255, 509, 1016, 2028, 4048, 8080
1, 1, 2, 4, 8, 16, 32, 64, 128, 256, 511, 1021, 2040, 4076, 8144
相关问题
最新问题