Animations of modal and dropdown in React Semantic UI

Question

I recently made the switch over to React Semantic-UI However, I found that none of the animations in the HTML version of Semantic-UI are present such as with the dropdown menu and modal popup.

I have tried using the transition prop and wrapping it around a modal, but to no avail.

<Transition animation='scale' duration={500}>
  <Modal
    trigger={<Button>Show Modal</Button>}
    header='Reminder!'
    content='Call Benjamin regarding the reports.'
    actions={[
      'Snooze',
      { key: 'done', content: 'Done', positive: true },
    ]}
  />
</Transition>

Is there any way do fix this?

Answer 1

There's quite a few solutions with examples given in the following discussion. I've tried wrapping the <Modal> with <TransitionablePortal> and it works. Check it out: https://github.com/Semantic-Org/Semantic-UI-React/issues/2923