I've attempted multiple times to implement a transition on eventBody, but it still isn't functioning correctly.
Here's the snippet of code:
export function Event({ event }: EventProps) {
const [showDropDown, setShowDropDown] = useState(false)
return (
<div className={styles.eventBody} hidden={!showDropDown}>
<div className={styles.line}></div>
<AttendeeList upcoming={true} attenders={attenders}></AttendeeList>
</div>
)
}
CSS:
.eventBody {
transition: all 0.4s ease-out;
}
.eventBody[hidden='true'] {
display: none;
}
I tried triggering setShowDropDown after 100ms delay upon every click on the header div, and also experimented with using height in the transition instead of all, but unfortunately, both methods were unsuccessful.