CODEWITHSUNDEEP
reactjs
GProst
GProst

Reputation: 10237

CSSTransitionGroup with single custom component

Can't get CSSTransitionGroup to work with my custom component.

Here is the code:

import {CSSTransitionGroup} from 'react-transition-group'

...

// in render():

  <CSSTransitionGroup
    transitionName='container'
    transitionEnterTimeout={500}
    transitionLeaveTimeout={300}
  >
    <MyComponent />
  </CSSTransitionGroup>

I see that CSSTransitionGroup has added a span with my component inside, but no classes on it. MyComponent render() method returns null or <div /> (if window.innerWidth < 960). So I can see content disappearing and showing on window resize, but no classes from CSSTransitionGroup.

Please help

Upvotes: 2

Views: 235

Answers (2)

pery mimon
pery mimon

Reputation: 8335

Maybe React-Anime-Manager will work better for you

import {useAnimeManager} from '@perymimon/react-anime-manager'
import {useState} from "react";

function ShowHide() {
    const [show, setShow] = useState(true);
    const {item: flag, phase, done} = useAnimeManager(show, {oneAtATime: true});

    useEffect(_ => {
        setTimeout(_ => setShow(false) , 500)
    }, [show])


    /**-> because there is no element when flag == false. `done` must called expliclty to guide `useAnimeManager` continue with the states flow and show the `true` value when it arrive */
    if (!flag) done()

    return  flag && <MyComponent className="container" />
}

Upvotes: 0

jered
jered

Reputation: 11581

CSSTransitionGroup manages the animation of its child components when they mount or unmount from the component tree. Since the logic that controls the contents of MyComponent is inside of that component, CSSTransitionGroup can't see it and won't manage it, because <MyComponent /> mounts and stays mounted.

For CSSTransitionGroup to work the way you want, you need to either put it inside of MyComponent so that it manages the <div /> that you want to animate, or you need to directly mount and unmount <MyComponent />.

In other words, the elements/components that you want CSSTransitionGroup to control need to be direct children of the CSSTransitionGroup component, and mount and unmount within it, otherwise it won't work.

Upvotes: 2

Related Questions