MM
AMA
MMA
AMM
CCA
plugin.dropdown{
width: 200px; /*width of box*/
margin-inline: auto; /*align in center*/
padding: 10px;
background-color: #17181f;
color: white;
transform: translateY(-150%); /*move to top*/
opacity: 0;
transition: all 200ms ease-out;
}
.dropdown.active{
transform: translateY(0); /*reset y position*/
opacity: 1;
} <Box className={["dropdown", plugin ? "active" : ""]}>
<div className="item">item 1</div>
<div className="item">item 2</div>
<div className="item">item 3</div>
<div className="item">item 4</div>
<div className="item">item 1</div>
<div className="item">item 2</div>
<div className="item">item 3</div>
<div className="item">item 4</div>
</Box> .dropdown.hidden {
pointer-events: none;
top: 0;
opacity: 0;
}
.dropdown {
position: absolute;
// This top value is being over-written by the hidden class
top: 1rem;
padding-top: 1rem;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .2s;
white-space: normal;
}