fix: visible -> !visible should also trigger onVisibleChanged (#33)

Author: zombieJ

src/hooks/useStatus.ts

@@ -226,6 +226,11 @@ export default function useStatus(
   // Trigger `onVisibleChanged`
   const firstMountChangeRef = React.useRef(false);
   useEffect(() => {
+    // [visible & motion not end] => [!visible & motion end] still need trigger onVisibleChanged
+    if (asyncVisible) {
+      firstMountChangeRef.current = true;
+    }
+
     if (asyncVisible !== undefined && status === STATUS_NONE) {
       // Skip first render is invisible since it's nothing changed
       if (firstMountChangeRef.current || asyncVisible) {

tests/CSSMotion.spec.tsx

@@ -773,5 +773,40 @@ describe('CSSMotion', () => {
 
       unmount();
     });
+
+    it('fast visible to !visible', () => {
+      const onVisibleChanged = jest.fn();
+
+      const Demo = ({ visible }: { visible: boolean }) => (
+        <CSSMotion
+          motionName="transition"
+          motionAppear
+          motionEnter
+          motionLeave
+          visible={visible}
+          onVisibleChanged={onVisibleChanged}
+        >
+          {({ style, className }) => (
+            <div
+              style={style}
+              className={classNames('motion-box', className)}
+            />
+          )}
+        </CSSMotion>
+      );
+
+      const { unmount, rerender, container } = render(<Demo visible />);
+      rerender(<Demo visible={false} />);
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.animationEnd(container.querySelector('.motion-box'));
+
+      expect(onVisibleChanged).toHaveBeenCalledTimes(1);
+      expect(onVisibleChanged).toHaveBeenCalledWith(false);
+
+      unmount();
+    });
   });
 });