refactor: move motion handling from wrapper to Notification component

- Replace transform translate3d with inset (right/top) for positioning
- Remove wrapper div, pass motionClassName and motionStyle directly to Notification
- Simplify CSS animation classes using translateX instead of translate3d
- Remove deprecated onLeaveStart/onLeaveActive callbacks from demo

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

assets/geek.less

@@ -35,11 +35,17 @@
   }
 
   &-notice {
+    position: absolute;
     pointer-events: auto;
     box-sizing: border-box;
     width: 100%;
-    transform: translate3d(var(--notification-x, 0), var(--notification-y, 0), 0);
-    transition: transform @notificationMotionDuration @notificationMotionEase;
+    // transform: translate3d(var(--notification-x, 0), var(--notification-y, 0), 0);
+    right: var(--notification-x, 0);
+    top: var(--notification-y, 0);
+    transition:
+      transform @notificationMotionDuration @notificationMotionEase,
+      inset @notificationMotionDuration @notificationMotionEase,
+      opacity @notificationMotionDuration @notificationMotionEase;
     padding: 14px 16px;
     border: 2px solid #111;
     border-radius: 14px;
@@ -78,7 +84,6 @@
       &:hover {
         background: #f4f9ff;
         box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
-        transform: translate3d(-1px, -1px, 0);
       }
     }
   }
@@ -101,37 +106,28 @@
 .notification-fade-appear-prepare,
 .notification-fade-enter-prepare {
   opacity: 0;
-  transform: translate3d(@notificationMotionOffset, 0, 0);
+  transform: translateX(@notificationMotionOffset);
+  transition: none;
 }
 
 .notification-fade-appear-start,
 .notification-fade-enter-start {
   opacity: 0;
-  transform: translate3d(@notificationMotionOffset, 0, 0);
+  transform: translateX(@notificationMotionOffset);
 }
 
 .notification-fade-appear-active,
 .notification-fade-enter-active {
   opacity: 1;
-  transform: translate3d(0, 0, 0);
-  transition:
-    transform @notificationMotionDuration @notificationMotionEase,
-    opacity @notificationMotionDuration @notificationMotionEase,
-    height @notificationMotionDuration @notificationMotionEase,
-    margin @notificationMotionDuration @notificationMotionEase;
+  transform: translateX(0);
 }
 
 .notification-fade-leave-start {
   opacity: 1;
-  transform: translate3d(0, 0, 0);
+  transform: translateX(0);
 }
 
 .notification-fade-leave-active {
   opacity: 0;
-  transform: translate3d(@notificationMotionOffset, 0, 0);
-  transition:
-    transform @notificationMotionDuration @notificationMotionEase,
-    opacity @notificationMotionDuration @notificationMotionEase,
-    height @notificationMotionDuration @notificationMotionEase,
-    margin @notificationMotionDuration @notificationMotionEase;
+  transform: translateX(@notificationMotionOffset);
 }

docs/examples/NotificationList.tsx

@@ -8,11 +8,6 @@ const motion: CSSMotionProps = {
   motionAppear: true,
   motionEnter: true,
   motionLeave: true,
-  onLeaveStart: (ele) => {
-    const { offsetHeight } = ele;
-    return { height: offsetHeight };
-  },
-  onLeaveActive: () => ({ height: 0, opacity: 0, margin: 0 }),
 };
 
 const Demo = () => {

src/NotificationList.tsx

@@ -171,61 +171,55 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
             };
 
             return (
-              <div
-                className={clsx(noticeWrapperCls, itemPrefixCls, motionClassName)}
-                style={{
-                  ...motionStyle,
+              <Notification
+                key={key}
+                {...notificationConfig}
+                ref={composeRef(nodeRef, setItemRef)}
+                prefixCls={prefixCls}
+                offset={notificationPosition.get(strKey)}
+                className={clsx(contextClassNames?.notice, config.className)}
+                style={config.style}
+                classNames={{
+                  root: clsx(classNames?.root, config.classNames?.root, motionClassName),
+                  icon: clsx(classNames?.icon, config.classNames?.icon),
+                  section: clsx(classNames?.section, config.classNames?.section),
+                  close: clsx(classNames?.close, config.classNames?.close),
+                  progress: clsx(classNames?.progress, config.classNames?.progress),
                 }}
-              >
-                <Notification
-                  key={key}
-                  {...notificationConfig}
-                  ref={composeRef(nodeRef, setItemRef)}
-                  prefixCls={prefixCls}
-                  offset={notificationPosition.get(strKey)}
-                  className={clsx(contextClassNames?.notice, config.className)}
-                  style={config.style}
-                  classNames={{
-                    root: clsx(classNames?.root, config.classNames?.root),
-                    icon: clsx(classNames?.icon, config.classNames?.icon),
-                    section: clsx(classNames?.section, config.classNames?.section),
-                    close: clsx(classNames?.close, config.classNames?.close),
-                    progress: clsx(classNames?.progress, config.classNames?.progress),
-                  }}
-                  styles={{
-                    root: {
-                      ...styles?.root,
-                      ...config.styles?.root,
-                    },
-                    icon: {
-                      ...styles?.icon,
-                      ...config.styles?.icon,
-                    },
-                    section: {
-                      ...styles?.section,
-                      ...config.styles?.section,
-                    },
-                    close: {
-                      ...styles?.close,
-                      ...config.styles?.close,
-                    },
-                    progress: {
-                      ...styles?.progress,
-                      ...config.styles?.progress,
-                    },
-                  }}
-                  components={{
-                    ...components,
-                    ...config.components,
-                  }}
-                  hovering={stackEnabled && listHovering}
-                  pauseOnHover={config.pauseOnHover ?? pauseOnHover}
-                  onClose={() => {
-                    config.onClose?.();
-                    onNoticeClose?.(key);
-                  }}
-                />
-              </div>
+                styles={{
+                  root: {
+                    ...styles?.root,
+                    ...config.styles?.root,
+                    ...motionStyle,
+                  },
+                  icon: {
+                    ...styles?.icon,
+                    ...config.styles?.icon,
+                  },
+                  section: {
+                    ...styles?.section,
+                    ...config.styles?.section,
+                  },
+                  close: {
+                    ...styles?.close,
+                    ...config.styles?.close,
+                  },
+                  progress: {
+                    ...styles?.progress,
+                    ...config.styles?.progress,
+                  },
+                }}
+                components={{
+                  ...components,
+                  ...config.components,
+                }}
+                hovering={stackEnabled && listHovering}
+                pauseOnHover={config.pauseOnHover ?? pauseOnHover}
+                onClose={() => {
+                  config.onClose?.();
+                  onNoticeClose?.(key);
+                }}
+              />
             );
           }}
         </CSSMotionList>