如何反轉此CSS3垂直下拉動畫？

Question

我正在設計一個垂直下拉菜單頭，當點擊時打開和關閉（使用輸入檢查類型），我無法得到這個開幕動畫，因爲關閉動畫只是一個縮放技巧，而不是與開場動畫一樣。

這是我的項目：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); 
    } 
} 

所有幫助表示讚賞！

Answer 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>