html - 如何反转CSS3垂直下拉动画？

我正在设计一个垂直的下拉标题，单击时可以打开和关闭（使用输入检查类型），并且我无法使该打开动画反转为关闭动画，因为关闭动画只是缩放技巧，与开幕动画。

这是我的项目：https://codepen.io/anon/pen/xLmbXd?editors=1100

我想将此结束缩放动画更改为实际动画：

@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  60% {
    -moz-transform: scaleY(0.25);
    -ms-transform: scaleY(0.25);
    -webkit-transform: scaleY(0.25);
    transform: scaleY(0.25);
  }
  80% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

感谢所有帮助！

最佳答案

问题是max-height会根据您的9999px高度进行动画处理（并进出），因此达到该距离的速度确实非常快。相反，您需要使用实际高度或在笔的第49行上设置max-height: 165px。

您也可以简化CSS到此。

.dropdown {position: relative;}
.dropdown > .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  transform: scaleY(0);
  transform-origin: 50% 0%;
  transition: transform 0s ease-out 0.6s,max-height 0.6s ease-out;
}

.dropdown > .dropdown-menu li a {
  display: block;
  color: #6f6f6f;
  background: #EEE;
  box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  padding: 10px 10px;
}
.dropdown > .dropdown-menu li a:hover {
  background: #f6f6f6;
}
.dropdown > input[type="checkbox"] {
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.dropdown > input[type="checkbox"]:checked ~ .dropdown-menu {
  max-height: 160px;
  display: block;
  transform: scaleY(1);
  transition: transform 0.6s ease-out,max-height 0.6s ease-out;
}

<div class="container">
  <h1 class="title">Dropdown Menu</h1>
  <ul>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">First Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">Second Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">Third Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</div>

关于html - 如何反转CSS3垂直下拉动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45964534/