Hello all
I want to create an animation for a dropdown using css and javascript. But when the display is set to none, the animations don't work maybe because display property can't be animated. But if I delay the display property, it gives animation enough time to load. So is there any possible method to delay the same display property through callback function? Here is my code:
function myfun() {
let dis = document.getElementsByClassName("litems")[0];
if (dis.style.display == "none") {
dis.style.display = "block";
dis.style.animation = "up 2s ease-in 1"
} else {
dis.style.animation = "down 2s ease-in 1";
setTimeout(() => {
dis.style.display = "none";
}, 2000)
}
}.list ul {
background: orchid;
position: absolute;
display: block;
}
@keyframes up {
0% {
top: 0px;
background: white;
}
100% {
top: 400px;
background: orange;
}
}
@keyframes down {
0% {
top: 400px;
background: orange;
}
100% {
top: 0px;
background: white;
}
} <button onclick="myfun()">Click it to toggle</button>
<div class="list">
<ul class="litems">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</body>Thank you very much.