fix: Motion should not unmount node

Author: zombieJ

examples/CSSMotion.tsx

@@ -17,6 +17,18 @@ async function forceDelay(): Promise<void> {
   });
 }
 
+const Div = React.forwardRef<HTMLDivElement, any>((props, ref) => {
+  React.useEffect(() => {
+    console.log('DIV >>> Mounted!');
+
+    return () => {
+      console.log('DIV >>> UnMounted!');
+    };
+  }, []);
+
+  return <div {...props} ref={ref} />;
+});
+
 class Demo extends React.Component<{}, DemoState> {
   state: DemoState = {
     show: true,
@@ -27,7 +39,9 @@ class Demo extends React.Component<{}, DemoState> {
   };
 
   onTrigger = () => {
-    this.setState(({ show }) => ({ show: !show }));
+    setTimeout(() => {
+      this.setState(({ show }) => ({ show: !show }));
+    }, 100);
   };
 
   onTriggerDelay = () => {
@@ -128,7 +142,7 @@ class Demo extends React.Component<{}, DemoState> {
               onLeaveEnd={this.skipColorTransition}
             >
               {({ style, className }, ref) => (
-                <div
+                <Div
                   ref={ref}
                   className={classNames('demo-block', className)}
                   style={style}

src/CSSMotion.tsx

@@ -134,7 +134,7 @@ export function genCSSMotion(
       }
     }
 
-    const [status, statusStep, statusStyle] = useStatus(
+    const [status, statusStep, statusStyle, mergedVisible] = useStatus(
       supportMotion,
       visible,
       getDomElement,
@@ -159,7 +159,7 @@ export function genCSSMotion(
       motionChildren = null;
     } else if (status === STATUS_NONE || !isSupportTransition(props)) {
       // Stable children
-      if (visible) {
+      if (mergedVisible) {
         motionChildren = children({ ...eventProps }, setNodeRef);
       } else if (!removeOnLeave) {
         motionChildren = children(

src/hooks/useStatus.ts

@@ -43,7 +43,9 @@ export default function useStatus(
     onEnterEnd,
     onLeaveEnd,
   }: CSSMotionProps,
-): [MotionStatus, StepStatus, React.CSSProperties] {
+): [MotionStatus, StepStatus, React.CSSProperties, boolean] {
+  // Used for outer render usage to avoid `visible: false & status: none` to render nothing
+  const [asyncVisible, setAsyncVisible] = useState(visible);
   const [status, setStatus] = useState<MotionStatus>(STATUS_NONE);
   const [style, setStyle] = useState<React.CSSProperties | undefined>(null);
 
@@ -192,6 +194,8 @@ export default function useStatus(
       setStatus(nextStatus);
       startStep();
     }
+
+    setAsyncVisible(visible);
   }, [visible]);
 
   // ============================ Effect ============================
@@ -225,5 +229,5 @@ export default function useStatus(
     };
   }
 
-  return [status, step, mergedStyle];
+  return [status, step, mergedStyle, asyncVisible];
 }