Implementare le animazioni slide up e slide down è semplice con i CSS.
Partiamo da questa marcatura:
<div class="slide"></div>
Il codice CSS è il seguente:
.slide {
max-height: 0;
opacity: 0;
overflow: hidden;
}
.slide-down {
animation: slideDown 800ms ease-in both;
}
.slide-up {
animation: slideUp 800ms ease-in both;
}
@keyframes slideDown {
0% {
opacity: 0;
max-height: 0;
}
100% {
opacity: 1;
max-height: 800px;
}
}
@keyframes slideUp {
0% {
opacity: 1;
max-height: 800px;
}
100% {
opacity: 0;
max-height: 0;
}
}