Reach-ui: Allow for a CssTransition (or similar) to be rendered in the portal

[arackaf]

Hey Ryan - love your Modal component - very sharp. This is sort of a feature request, but if you think it'd be useful, I'd be more than happy to look at implementing for you in a PR.

Basically, it would be neat if we could force our DialogOverlay to be rendered in the portal inside of a Transition group of some sort. That would allow users to add animations without needing to mess with springs and such. I can't think of any clean way to do this though. Best I can come up with would be something like

<DialogOverlay renderIn={DOv => (
  <TransitionGroup>
    <CSSTransition classNames="xyz" timeout={300} key={1}>
      {DOv}
    </CSSTransition>
  </TransitionGroup>
)}>
  <DialogContent>
    <h1>Hi</h1>

Like I said, if you think there's some implementation you'd like, let me know and I'd be happy to give it a shot.

[ryanflorence]

How is this different than the animation example on the docs page? https://ui.reach.tech/dialog#animation-example

[arackaf]

It's been awhile, but, I think the point was that I didn't want to use a Spring, like your example does; I wanted to just use CSS transitions with a CSSTransitionGroup. But, if I did something like

<CSSTransitionGroup>
  <ModalOverlay>

then you were snatching the ModalOverlay and rendering it into the portal, outside the reach of my transition group. I think that's what happened. If the above should work, then never mind :)

[ryanflorence]

Oh, then the CSS cascade wouldn't work cause it moved the parent.

I dunno, what to do here, I think TransitionGroup is generally a pretty rough API and we'll see way better animation abilities with hooks like useTransition or useSpring and you won't have to worry about the cascade.

I'm gonna close cause this adds lots of complexity for a pattern of animation I think is going away.

[gnapse]

I found a workaround like this useful (then again my use case was really simple, but I think that introducing react spring just for what I needed was not justified):

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[data-reach-dialog-overlay] {
  animation: fadein 0.2s;
}

[arackaf]

@gnapse - but that won’t work when animating the modal OUT, would it?

[gnapse]

Yeah probably not, because the overlay is unmounted ASAP, without having any chance to animate itself out. Not in a position to check any of this right now, but yes, probably that's the case.