Question

我将下拉菜单的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>

Answer 1

这是你的意思吗？

.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动画-0到100并返回0

1 个答案: