React and DIV Transition

[clarkgriswald]

I have a react app that contains something like this :

<div id='button'>
     <div id='menu'>
          <div id='menu-item'>Item 1</div>
          <div id='menu-item'>Item 2</div>
          <div id='menu-item'>Item 3</div>
     </div>
</div>

The 'menu' div is only rendered when the state is set appropriately (the button click toggles a 'showMenu' state variable) - if showMenu, I would like to make the 'menu' div appear to dropdown from its current coordinates. Been playing with key-frames, but can't quite get what I want. I am just looking for a nice transition as opposed to an instant visibility change.

[techgnome]

Personally I'd use an existing component that has that functionality... will be a lot easier than trying it yourself. I've seen several component libraries out there that have transitional animation capabilities in them.


-tg