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) => (