CODEWITHSUNDEEP
cssreactjsanimationreact-transition-group
Myles
Myles

Reputation: 812

react-transition-group transition initial render without props/state

I'm currently implementing a Modal component within my app, using Portals. What I'm trying to achieve is that when the Modal component is rendered, it should fade in and when it's no longer rendered it should fade out.

Looking at the react-transition-group docs it appears that props have to be used in order to achieve this, however I'd like a solution without any form of state or props. Consider:

<App>
<Modal />
</App>

App should load as normal, however Modal should fade in. When Modal is no longer rendered based on some condition way above these components, it should fade out.

Here's the actual code for 

import Fade from "../Fade";
import { TransitionGroup } from "react-transition-group";

const Modal = ({ children, ...other }) => {

return (
<Portal>
  <TransitionGroup>
    <Fade>
      {children}
    </Fade>
  </TransitionGroup>
</Portal>
);
};

And for the Fade component:

import { CSSTransition } from 'react-transition-group';

const Fade = ({ children, ...other }) => (

<CSSTransition
{...other}
timeout={500}
classNames={{
  //my classes here
}}
>
{children}
</CSSTransition>
);

Any suggestion? I'm sure this used to work, before React 16 and react-css-transitions changed to react-transition-group but I'm having a very hard time figuring this out.

To be clear, I can transition using state/props and have a working example of this but that is not what I'm trying to achieve. I'd like to fade in when it is rendered, and fade out when it is un-rendered...

Thanks!

Upvotes: 0

Views: 3171

Answers (1)

Myles
Myles

Reputation: 812

appear={true}

Seems to fix this for now, although there's no way to animate the reverse (component being un-mounted).

Upvotes: 3

Related Questions