我将下拉菜单的div设置为如下所示,当div打开时会发生这种情况:

.locationDropdownList {
  position: absolute;
  top: 83px;
  width: 100%;
  background: white;
  z-index: 1000;
  padding: 0 1rem 1rem 1rem;
  animation: dropdown 250ms ease-in-out;
  box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.2);
  max-height: 250px;
  overflow-x: hidden;
}

@keyframes dropdown {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


它在打开时有效,但是在关闭时又如何设置呢?我尝试在100%之下添加0%,但这没做任何事情。有什么建议吗?

更新:

所以它的工作原理如下

我有一个名为LocationDropdown的div的父级,当单击该父级时,会将一个名为focused的类应用于父级,然后激活下拉列表以打开locationDropdownList这是一个保存列表的div

<div class="LocationDropdown">
  <div>
    <p class="locationSelectText">London</p>
  </div>
</div>


当点击重点课程时

<div class="LocationDropdown focused">
  <div>
    <p class="locationSelectText">London</p>
  </div>
  <div class="locationDropdownList">
    <ul>
      <li></li>
       .....
       .....
      </ul>
    <ul>
      <li></li>
      .....
      .....
    </ul>
    <ul>
      <li></li>
       .....
       .....
    </ul>
  </div>
</div>

最佳答案

这是你的意思吗?



.locationDropdownList {
  position: absolute;
  top: 83px;
  width: 100%;
  background: white;
  z-index: 1000;
  padding: 0 1rem 1rem 1rem;
  animation: dropdown 1s ease-in-out infinite;
  box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.2);
  max-height: 250px;
  overflow-x: hidden;
}

@keyframes dropdown {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

<div class="LocationDropdown focused">
  <div>
    <p class="locationSelectText">London</p>
  </div>
  <div class="locationDropdownList">
    <ul>
      <li></li>
       .....
       .....
      </ul>
    <ul>
      <li></li>
      .....
      .....
    </ul>
    <ul>
      <li></li>
       .....
       .....
    </ul>
  </div>
</div>

关于css - CSS动画-0到100并返回0,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55608027/

10-12 12:32
查看更多