Animations on modals

[coolpopo]

Why are there no animations on modal components? When implementing modals, it pops up so suddenly. Is the documentation on the website outdated or is this already implemented?

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[traverse]

@coolpopo Looking at https://react.semantic-ui.com/modules/modal shows that there aren't any animations currently. Maybe you were looking at https://semantic-ui.com/modules/modal.html ?

[thhoang99]

wrap TransitionablePortal outside Modal and modal will have animations.

[hubertguillemain]

@thhoang99 would you have a snippet or codepen demonstration this ? I could not make it work

[thhoang99]

@hubertguillemain Ok, here you go https://codepen.io/thhoang99/pen/XYxMOX?editors=0010.

[hubertguillemain]

Thanks @thhoang99 I see that you actually have to force set the inner Modal's open prop to true. Perfect !

[pincheira]

@thhoang99 @hubertguillemain have you guys found maybe a clean solution for the background of the modal not being animated?

[pincheira]

Ok guys, just put together a fix for animating the dimmer background: https://codepen.io/jpincheira/pen/rKoYNW

Thank you @thhoang99 for your solution.

[thhoang99]

@pincheira your solution for dimmer animation very well, for my solution, i still continue use TransitionablePortal wrap outside Dimmer, but this time same your, i must interfere with css to remove background dimmer of modal.

[Martinnord]

Thank you! @pincheira

[pincheira]

No worries @Martinnord, super glad you found it useful 👍

[annjawn]

Both Transition and TransitionablePortal support modals as far as I have seen. I use both in my production app.

[Martinnord]

@annjawn Would you mind sharing the code? You got me super curious!

[annjawn]

@Martinnord here you go - https://codesandbox.io/s/zx93o93w3x . The benefit to using TransitionablePortal is to get the hooks that are available for Portal since it looks like TransitionablePortal is just a Portal wrapped in Transition. Although TransitionablePortal would probably be my preference to animate a modal, Transition can be used for basic use cases as well.

[Martinnord]

@annjawn Sorry for the late reply. It looks great! Although it would be nice to see it animating out as well. Is that possible with TransitionablePortal?

[annjawn]

@Martinnord Yes unfortunately, transition out effect can only be achieved by TransitionablePortal or Transition.Group. I have created a fully functional Material UI style App SnackBar using TransitionablePortal in SUIR and it works quite well.

[Martinnord]

@annjawn I see! What's bugs me is that my setup in my app looks like this:

{openStartMenuModal && (
    <TransitionablePortal open={openStartMenuModal} transition={'fly down'} duration={2000}>
        <StartMenuModal
            openStartMenuModal={openStartMenuModal}
            closeModal={this.closeModal}
            shopMenu={shopMenu}
            handleSelectedBundleProduct={this.handleSelectedBundleProduct}
            handleTabChange={this.handleTabChange}
            handleProductToCart={this.handleProductToCart}
        />
    </TransitionablePortal>
)}

But I cannot get the transition to work. I re-created my setup in a codesandbox here, https://codesandbox.io/s/lyxw0002lz and it works pretty well. Which makes no sense to me 😖

[annjawn]

Try Transition.Group. Here's your CodeSandbox code modified, and fully working.

<Transition.Group
          open={open}
          transition={"fade down"}
          duration={1500} >
        {open && (          
            <Modal open={'true'}>
              <Modal.Header>Select a Photo</Modal.Header>
              <Modal.Content image>
                <Modal.Description>
                  <p>
                    We've found the following gravatar image associated with
                    your e-mail address.
                  </p>
                  <p>Is it okay to use this photo?</p>
                </Modal.Description>
                <Button onClick={this.openModal}>Click me!</Button>
              </Modal.Content>
            </Modal>          
        )}
</Transition.Group>

1500 is too long btw, keep to 300 - 400 max duration. And don't forget to import Transition instead of TransitionablePortal. The reason it is not working as expected is because you are controlling the mounting of the transition itself using the open && condition, instead of the content of the Transition. It looks like it is working but only because your transition duration is too long, so the transition kind of persists a little bit after the transition actually mounts, giving you the illusion that it's working, but I bet it doesn't look like working if you reduce the duration. You only need to control the mounting of the content of the transition using the open && condition and the visibility of the Transition.Group using it's open props.

Code Sandbox - https://codesandbox.io/s/14nk96xx3j

[Martinnord]

Thanks for the quick answer. I looked at the code and tried to apply it to my. Unfortunately I still have no luck with this. The transition just wont do its job. I understand it's hard for you to pinpoint out what I'm doing wrong, but this is my current code:

<Transition.Group
    open={openStartMenuModal}
    transition={"fade down"}
    duration={400}
>
    {openStartMenuModal && (
        <StartMenuModal
            open={openStartMenuModal}
            closeModal={this.closeModal}
            shopMenu={shopMenu}
            handleSelectedBundleProduct={this.handleSelectedBundleProduct}
            handleTabChange={this.handleTabChange}
            handleProductToCart={this.handleProductToCart}
        />
    )}
</Transition.Group>

Really weird!

[annjawn]

can you replace this

<StartMenuModal
            open={openStartMenuModal}

with this

<StartMenuModal
            open={true}

Assuming your StartMenuModal wrapper for Modal is passing down the open props correctly to Modal, it should be working.

[Martinnord]

Okay.. So after some investigating in Semantics own source code I've come across this. At this line in TransitionGroup, https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Transition/TransitionGroup.js#L111. They essentially just wrap the child in a Transition. So I went into Transition.js. And noticed at this line here, https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Transition/Transition.js#L289. They cloneElement(this.props.children, ...) and tac on some computed classNames and computed styles. So their built in Modal component probably already knows how to accept this. But my wrapper didn't have that. So I just had to add className and style to my StartMenuModal props and put them on the Modal.

As shown here, https://codesandbox.io/s/zqzv2y4923

[annjawn]

Yes, I was actually thinking that there must be something with the wrapped component that you are using. But glad that you were able to resolve this. I have struggled a little myself with the Transition, Transition.Group and TransitionablePortal usage and use cases with modals and popups,. Ultimately, many many codesandbox later, I ended up creating a few HOCs with cool animations like Snackbar, a Custom Modal, Yes/No Confirmation Popup with either Transition or Transition.Group and use them all over in our App.

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[lextoc]

I'd love to be able to add fade in/out animation to my modal which currently isn't possible yet, please keep this thread open. The workaround with the TransitionablePortal is extra work and visual glitches occur.

[jonathborg]

hello?

[celwell]

Would be nice to be able to add transition to Popup's. The examples for non-React Semantic UI are much nicer: https://semantic-ui.com/modules/popup.html