CODEWITHSUNDEEP
reactjssemantic-ui-react
spjy
spjy

Reputation: 467

Animations of modal and dropdown in React Semantic UI

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?

Upvotes: 9

Views: 5758

Answers (1)

Saravana
Saravana

Reputation: 61

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

Upvotes: 5

Related Questions