chore: flying

Author: zombieJ

assets/index.less

@@ -87,7 +87,7 @@
     }
 
     &-visible {
-      transition: all 0.3s;
+      transition: all 0.1s;
     }
   }
 
@@ -97,6 +97,30 @@
     background: transparent !important;
     z-index: 1;
   }
+
+  // Motion Content
+  &-motion-content {
+    // Fade motion
+    &-fade-appear {
+      opacity: 0;
+      animation-duration: 0.3s;
+      animation-fill-mode: both;
+      animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+    }
+
+    &-fade-appear&-fade-appear-active {
+      animation-name: rcTriggerFadeIn;
+    }
+
+    @keyframes rcTriggerFadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 @import './index/Mask';

docs/examples/two-buttons.tsx

@@ -2,7 +2,7 @@ import Trigger, { UniqueProvider } from '@rc-component/trigger';
 import React, { useState } from 'react';
 import '../../assets/index.less';
 
-const LEAVE_DELAY = 0.1;
+const LEAVE_DELAY = 0.2;
 
 const builtinPlacements = {
   left: {

src/Popup/index.tsx

@@ -186,10 +186,12 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
   }, [show, getPopupContainerNeedParams, target]);
 
   // ========================= Resize =========================
-  const onInternalResize: ResizeObserverProps['onResize'] = useEvent((size) => {
-    onResize?.(size);
-    onAlign();
-  });
+  const onInternalResize: ResizeObserverProps['onResize'] = useEvent(
+    (size, ele) => {
+      onResize?.(size, ele);
+      onAlign();
+    },
+  );
 
   // ========================= Styles =========================
   const offsetStyle = useOffsetStyle(

src/UniqueProvider/MotionContent.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { TriggerProps } from '..';
+import CSSMotion from '@rc-component/motion';
+import classNames from 'classnames';
+
+export interface MotionContentProps {
+  prefixCls: string; // ${prefixCls}-motion-content apply on root div
+  children: TriggerProps['popup'];
+}
+
+const MotionContent = (props: MotionContentProps) => {
+  const { prefixCls, children } = props;
+
+  const childNode = typeof children === 'function' ? children() : children;
+
+  // motion name: `${prefixCls}-motion-content-fade`, apply in index.less
+  const motionName = `${prefixCls}-motion-content-fade`;
+
+  return (
+    <CSSMotion motionAppear motionLeave={false} visible motionName={motionName}>
+      {({ className: motionClassName, style: motionStyle }) => {
+        const cls = classNames(`${prefixCls}-motion-content`, motionClassName);
+
+        return (
+          <div className={cls} style={motionStyle}>
+            {childNode}
+          </div>
+        );
+      }}
+    </CSSMotion>
+  );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  MotionContent.displayName = 'MotionContent';
+}
+
+export default MotionContent;

src/UniqueProvider/index.tsx

@@ -14,6 +14,7 @@ import useTargetState from './useTargetState';
 import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 import FloatBg from './FloatBg';
 import classNames from 'classnames';
+import MotionContent from './MotionContent';
 
 export interface UniqueProviderProps {
   children: React.ReactNode;
@@ -41,13 +42,18 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
   });
 
   // ========================== Register ==========================
+  const [popupId, setPopupId] = React.useState(0);
+
   const delayInvoke = useDelay();
 
-  const show = (showOptions: UniqueShowOptions) => {
+  const show = useEvent((showOptions: UniqueShowOptions) => {
     delayInvoke(() => {
+      if (showOptions.id !== options?.id) {
+        setPopupId((i) => i + 1);
+      }
       trigger(showOptions);
     }, showOptions.delay);
-  };
+  });
 
   const hide = (delay: number) => {
     delayInvoke(() => {
@@ -60,11 +66,6 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
   const onVisibleChanged = useEvent((visible: boolean) => {
     // Call useTargetState callback to handle animation state
     onTargetVisibleChanged(visible);
-    // if (!visible) {
-    //   setTarget(null);
-    //   setCurrentNode(null);
-    //   setOptions(null);
-    // }
   });
 
   // =========================== Align ============================
@@ -133,7 +134,11 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
             ref={setPopupRef}
             portal={Portal}
             prefixCls={prefixCls}
-            popup={options.popup}
+            popup={
+              <MotionContent prefixCls={prefixCls} key={popupId}>
+                {options.popup}
+              </MotionContent>
+            }
             className={classNames(
               options.popupClassName,
               `${prefixCls}-unique-controlled`,

src/context.ts

@@ -12,6 +12,7 @@ export default TriggerContext;
 
 // ==================== Unique ====================
 export interface UniqueShowOptions {
+  id: string;
   popup: TriggerProps['popup'];
   target: HTMLElement;
   delay: number;

src/index.tsx

@@ -317,6 +317,7 @@ export function generateTrigger(
       maskMotion,
       arrow,
       getPopupContainer,
+      id,
     }));
 
     // Handle controlled state changes for UniqueProvider