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.15k stars 650 forks source link

Css transition classNames get removed by react updates, if child has 'className' props #854

Open icy0307 opened 2 years ago

icy0307 commented 2 years ago

What is the current behavior?

CSSTransition add classname to child component by dom API directly, not by react. If react updates after CSSTransition adding class, CSSTransition's class names ,like 'enter-done', get removed by react props.

const [showClassNames, setshowClassNames] = useState(false);
<CSSTransition nodeRef={nodeRef} in={inProp} timeout={200} classNames="my-node">
        <div 
           ref={nodeRef}
           className={showClassNames? "anyClassName": ""}
           onClick={() => {setshowClassNames(true)}
         >
          {"I'll receive my-node-* classes"}
        </div>
</CSSTransition>

What is the expected behavior?

CSSTransition's class names remains , even if child component updates with class

Could you provide a CodeSandbox demo reproducing the bug?

https://codesandbox.io/s/morning-pond-xu2e9l