如何撤消此CSS3垂直下拉动画?

时间:2017-08-30 15:35:45

标签: html css3 animation

我正在设计一个垂直下拉标题,可以在点击时打开和关闭(使用输入检查类型),但我无法通过关闭动画获得此开场动画,因为结束动画只是一个缩放技巧与开场动画不同。

这是我的项目: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);
  }
}

感谢所有帮助!

1 个答案:

答案 0 :(得分:1)

问题是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>