我正在设计一个垂直下拉标题,可以在点击时打开和关闭(使用输入检查类型),但我无法通过关闭动画获得此开场动画,因为结束动画只是一个缩放技巧与开场动画不同。
这是我的项目: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);
}
}
感谢所有帮助!
答案 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>