reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.1k stars 652 forks source link

Warning: findDOMNode is deprecated in StrictMode. #893

Open shanhai3000 opened 8 months ago

shanhai3000 commented 8 months ago

I've looked through the historical issues, but none of them worked in my case.

The code is roughly like this

                             <tbody>    
                <TransitionGroup component={null} >
                    {
                        anArrayInReduxStore.map((e, _) => {
                            <CSSTransition key={e.id} classNames="fade"
                                timeout={300}
                                appear={true}
                                exit={false}
                            >
                                <CustomComponent  data={e}/> //a very complex row in a table
                            </CSSTransition>
                        })

                    }
                </TransitionGroup>
                             </tbody>

If i use code below, the warning will disapear, but the animation is gone, and the more serious thing is, when i remove element in {anArrayInReduxStore}, the Row Element doesn't remove

The code is roughly like this

    const TransitionNode = ({ e }) => {
        const nodeRef = React.useRef(null)
        return (
            <CSSTransition key={e.id} classNames="fade"
                timeout={300}
                appear={true}
                nodeRef={nodeRef}
            > 
                  <CustomComponent  data={e}/> //a very complex row in a table
            </CSSTransition>
        );
    }
                          <tbody>    
                <TransitionGroup component={null} >
                    {
                        anArrayInReduxStore.map((e, _) => {
                            <TransitionNode key={e.id} data={e} />
                        })
                    }
                </TransitionGroup>
                         </tbody>
oreqizer commented 8 months ago

I am afraid that this library is unmaintained, mate 😕 this exact thing had me looking for an alternative months ago

RotemCarmon commented 8 months ago

I am afraid that this library is unmaintained, mate 😕 this exact thing had me looking for an alternative months ago

@oreqizer what alternative did you find?

oreqizer commented 8 months ago

@RotemCarmon started using raw @keyframes and CSS animations together with react-aria state

a more direct alternative is the react-transition-state hook

drikusroor commented 6 months ago

@RotemCarmon started using raw @keyframes and CSS animations together with react-aria state

a more direct alternative is the react-transition-state hook

Hi @oreqizer, do you have any examples I could look at per chance?

Arkellys commented 6 months ago

This look like a duplicate of this issue. You have to pass a ref to your <CustomComponent> as well for the animation to work.