I currently have a filter that is hidden when clicked, with a transition effect that moves it from the bottom to the top. I have recorded my screen to demonstrate this behavior: . However, I now need the filter to hide from top to bottom instead, essentially reversing the animation so that it ends up showing the filter button.
.filter-block {
background-color: #fff;
padding: 20px 0 1px;
position: relative;
transition: max-height 0.5s ease, padding 0.5s ease 0.3s;
> .container {
transition: opacity 0.5s ease-in 0.2s;
opacity: 1;
}
&--hide {
max-height: 0;
padding: 0;
overflow: hidden;
> .container {
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
}
}
<div className={cn('filter-block', {
'filter-block--hide ': !showMainFilter
})}> code inside </div>