Wie reverse ich diese CSS3 vertikale Dropdown-Animation?

Question

Ich entwerfe eine vertikale Dropdown - Kopfzeile, die geöffnet und geschlossen wird (mit einem Eingabeüberprüfungstyp), wenn ich darauf klicke und ich kann diese Eröffnungsanimation nicht für die schließende Animation umkehren, weil die schließende Animation nur ein Skalierungstrick ist und nicht die Gleich wie die Eröffnungsanimation.

Das ist mein Projekt: https://codepen.io/anon/pen/xLmbXd?editors=1100

Ich möchte diese Schließung Skalierung Animation auf die eigentliche Animation ändern:

@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); 
    } 
} 

Alle Hilfe ist willkommen!

Answer 1

Das Problem ist, dass die maximale Höhe basierend auf Ihrer 9999px Höhe animiert und erleichtert (hinein und heraus), so dass es sehr schnell geht, diese Entfernung zu erreichen. Stattdessen müssen Sie tatsächliche Höhen verwenden oder max-height: 165px in Zeile 49 Ihres Stiftes einstellen.

Sie könnten auch Ihre CSS zu vereinfachen;

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