diff --git a/src/CSSMotion.tsx b/src/CSSMotion.tsx index e58463f..da82ba4 100644 --- a/src/CSSMotion.tsx +++ b/src/CSSMotion.tsx @@ -185,12 +185,12 @@ export function genCSSMotion( // Stable children if (mergedVisible) { motionChildren = children({ ...mergedProps }, setNodeRef); - } else if (!removeOnLeave && renderedRef.current) { + } else if (!removeOnLeave && renderedRef.current && leavedClassName) { motionChildren = children( { ...mergedProps, className: leavedClassName }, setNodeRef, ); - } else if (forceRender) { + } else if ( forceRender || (!removeOnLeave && !leavedClassName)) { motionChildren = children( { ...mergedProps, style: { display: 'none' } }, setNodeRef, diff --git a/tests/CSSMotion.spec.tsx b/tests/CSSMotion.spec.tsx index d03831b..d42be42 100644 --- a/tests/CSSMotion.spec.tsx +++ b/tests/CSSMotion.spec.tsx @@ -159,6 +159,59 @@ describe('CSSMotion', () => { }, ); + it('leaveClassName should add to dom', () => { + const genMotion = (props) => { + const {visible,leavedClassName} = props + return ( + + {({ style, className }) => { + return ( +
+ ); + }} + + ); + }; + const { container, rerender } = render(genMotion({visible:false})); + + rerender(genMotion({ visible: true })); + + act(() => { + jest.runAllTimers(); + }); + + expect(container.querySelector('.motion-box')).toBeTruthy(); + rerender(genMotion({ visible: false,leavedClassName:'removed'})); + act(() => { + jest.runAllTimers(); + }); + + fireEvent.transitionEnd(container.querySelector('.motion-box')); + + expect(container.querySelector('.motion-box')).toHaveClass('removed'); + + rerender(genMotion({ visible: true })); + act(() => { + jest.runAllTimers(); + }); + rerender(genMotion({ visible: false })); + act(() => { + jest.runAllTimers(); + }); + + fireEvent.transitionEnd(container.querySelector('.motion-box')); + expect(container.querySelector('.motion-box')?.classList.contains('removed')).toBeFalsy(); + + }); + it('stop transition if config motion to false', () => { const genMotion = (props?: CSSMotionProps) => (