the effect is shown in the figure:
when you click, it displays a box that I use to show the hidden implementation, without animation. Now the product requires the box to be animated down when clicked and animated up when closed. How can this be realized?
add a height to the box. After clicking, the height changes from 0 to 100%
assuming that the height is 300, just change the dispalay directly
@keyframes animateName {
from {
height: 0;
}
to {
height: 300px;
}
}wrote a demo, which I hope will be useful to you.
https://codepen.io/mudontire/...