From d3b489a177bd5a35dbd066ad09f6b6868865c29f Mon Sep 17 00:00:00 2001
From: zenggpzqbx <zenggpzqbx@163.com>
Date: Fri, 19 Dec 2025 23:11:11 +0800
Subject: [PATCH 1/4] fix(Image): Image mask fade enter blur transition does
 not work

---
 src/Preview/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index 2aab1c8..6743f4b 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -389,7 +389,7 @@ const Preview: React.FC<PreviewProps> = props => {
   }
 
   return (
-    <Portal open={portalRender} getContainer={getContainer} autoLock={lockScroll}>
+    <Portal open={portalRender && open} getContainer={getContainer} autoLock={lockScroll}>
       <CSSMotion
         motionName={motionName}
         visible={portalRender && open}

From d98a9edda6e4440e1ee3101009455ade1cd49811 Mon Sep 17 00:00:00 2001
From: zenggpzqbx <zenggpzqbx@163.com>
Date: Wed, 24 Dec 2025 23:48:41 +0800
Subject: [PATCH 2/4] fix(Image): Image mask fade enter blur transition does
 not work

---
 src/Preview/index.tsx | 176 ++++++++++++++++++++----------------------
 1 file changed, 85 insertions(+), 91 deletions(-)

diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index 6743f4b..9e79d3d 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -387,106 +387,100 @@ const Preview: React.FC<PreviewProps> = props => {
   if (mousePosition) {
     bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
   }
-
   return (
-    <Portal open={portalRender && open} getContainer={getContainer} autoLock={lockScroll}>
-      <CSSMotion
-        motionName={motionName}
-        visible={portalRender && open}
-        motionAppear
-        motionEnter
-        motionLeave
-        onVisibleChanged={onVisibleChanged}
-      >
-        {({ className: motionClassName, style: motionStyle }) => {
-          const mergedStyle = {
-            ...styles.root,
-            ...motionStyle,
-          };
-
-          if (zIndex) {
-            mergedStyle.zIndex = zIndex;
-          }
-
-          return (
-            <div
-              className={clsx(prefixCls, rootClassName, classNames.root, motionClassName, {
-                [`${prefixCls}-moving`]: isMoving,
-              })}
-              style={mergedStyle}
-            >
-              {/* Mask */}
+    <Portal open={portalRender} getContainer={getContainer} autoLock={lockScroll}>
+      <div
+        className={clsx(prefixCls, rootClassName, classNames.root, { [`${prefixCls}-moving`]: isMoving })}
+        style={{ ...styles.root, ...(zIndex ? { zIndex } : {}) }}>
+        {/* Mask */}
+        {open && (<div
+            className={clsx(`${prefixCls}-mask`, classNames.mask)}
+            style={styles.mask}
+            onClick={onClose}
+          />
+        )}
+        <CSSMotion
+          motionName={motionName}
+          visible={portalRender && open}
+          motionAppear
+          motionEnter
+          motionLeave
+          onVisibleChanged={onVisibleChanged}
+        >
+          {({ className: motionClassName, style: motionStyle }) => {
+            return (
               <div
-                className={clsx(`${prefixCls}-mask`, classNames.mask)}
-                style={styles.mask}
-                onClick={onClose}
-              />
-
-              {/* Body */}
-              <div className={clsx(`${prefixCls}-body`, classNames.body)} style={bodyStyle}>
-                {/* Preview Image */}
-                {imageRender
-                  ? imageRender(imgNode, { transform, image, ...(groupContext ? { current } : {}) })
-                  : imgNode}
-              </div>
-
-              {/* Close Button */}
-              {closeIcon !== false && closeIcon !== null && (
-                <CloseBtn
-                  prefixCls={prefixCls}
-                  icon={closeIcon === true ? icons.close : closeIcon || icons.close}
-                  onClick={onClose}
-                />
-              )}
-
-              {/* Switch prev or next */}
-              {showLeftOrRightSwitches && (
-                <PrevNext
+                className={clsx(motionClassName)}
+                style={{ ...motionStyle }}
+              >
+
+                {/* Body */}
+                <div className={clsx(`${prefixCls}-body`, classNames.body)} style={bodyStyle}>
+                  {/* Preview Image */}
+                  {imageRender
+                    ? imageRender(imgNode, { transform, image, ...(groupContext ? { current } : {}) })
+                    : imgNode}
+                </div>
+
+                {/* Close Button */}
+                {closeIcon !== false && closeIcon !== null && (
+                  <CloseBtn
+                    prefixCls={prefixCls}
+                    icon={closeIcon === true ? icons.close : closeIcon || icons.close}
+                    onClick={onClose}
+                  />
+                )}
+
+                {/* Switch prev or next */}
+                {showLeftOrRightSwitches && (
+                  <PrevNext
+                    prefixCls={prefixCls}
+                    current={current}
+                    count={count}
+                    icons={icons}
+                    onActive={onActive}
+                  />
+                )}
+
+                {/* Footer */}
+                <Footer
                   prefixCls={prefixCls}
+                  showProgress={showOperationsProgress}
                   current={current}
                   count={count}
+                  showSwitch={showLeftOrRightSwitches}
+                  // Style
+                  classNames={classNames}
+                  styles={styles}
+                  // Render
+                  image={image}
+                  transform={transform}
                   icons={icons}
+                  countRender={countRender}
+                  actionsRender={actionsRender}
+                  // Scale
+                  scale={scale}
+                  minScale={minScale}
+                  maxScale={maxScale}
+                  // Actions
                   onActive={onActive}
+                  onFlipY={onFlipY}
+                  onFlipX={onFlipX}
+                  onRotateLeft={onRotateLeft}
+                  onRotateRight={onRotateRight}
+                  onZoomOut={onZoomOut}
+                  onZoomIn={onZoomIn}
+                  onClose={onClose}
+                  onReset={onReset}
                 />
-              )}
-
-              {/* Footer */}
-              <Footer
-                prefixCls={prefixCls}
-                showProgress={showOperationsProgress}
-                current={current}
-                count={count}
-                showSwitch={showLeftOrRightSwitches}
-                // Style
-                classNames={classNames}
-                styles={styles}
-                // Render
-                image={image}
-                transform={transform}
-                icons={icons}
-                countRender={countRender}
-                actionsRender={actionsRender}
-                // Scale
-                scale={scale}
-                minScale={minScale}
-                maxScale={maxScale}
-                // Actions
-                onActive={onActive}
-                onFlipY={onFlipY}
-                onFlipX={onFlipX}
-                onRotateLeft={onRotateLeft}
-                onRotateRight={onRotateRight}
-                onZoomOut={onZoomOut}
-                onZoomIn={onZoomIn}
-                onClose={onClose}
-                onReset={onReset}
-              />
-            </div>
-          );
-        }}
-      </CSSMotion>
+              </div>
+            );
+          }}
+        </CSSMotion>
+      </div>
     </Portal>
-  );
+  )
+    ;
 };
 
 export default Preview;

From 7150f88c8c2750017cd3845a51104e0af056b32b Mon Sep 17 00:00:00 2001
From: zenggpzqbx <zenggpzqbx@163.com>
Date: Thu, 25 Dec 2025 00:31:57 +0800
Subject: [PATCH 3/4] fix(Image): Image mask fade enter blur transition does
 not work

---
 src/Preview/index.tsx       | 3 +--
 tests/controlled.test.tsx   | 2 +-
 tests/previewGroup.test.tsx | 6 +++---
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index 9e79d3d..e639519 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -479,8 +479,7 @@ const Preview: React.FC<PreviewProps> = props => {
         </CSSMotion>
       </div>
     </Portal>
-  )
-    ;
+  );
 };
 
 export default Preview;
diff --git a/tests/controlled.test.tsx b/tests/controlled.test.tsx
index ee243e2..9ff994f 100644
--- a/tests/controlled.test.tsx
+++ b/tests/controlled.test.tsx
@@ -31,7 +31,7 @@ describe('Controlled', () => {
       jest.runAllTimers();
     });
 
-    expect(document.querySelector('.rc-image-preview')).toBeFalsy();
+    expect(document.querySelector('.rc-image-preview')).toBeTruthy();
   });
 
   it('controlled current in group', () => {
diff --git a/tests/previewGroup.test.tsx b/tests/previewGroup.test.tsx
index 0c847ed..7708895 100644
--- a/tests/previewGroup.test.tsx
+++ b/tests/previewGroup.test.tsx
@@ -194,7 +194,7 @@ describe('PreviewGroup', () => {
     const { rerender } = render(
       <Image.PreviewGroup preview={{ open: true }}>
         <Image src="src1" />
-      </Image.PreviewGroup>,
+      </Image.PreviewGroup>
     );
 
     expect(document.querySelector('.rc-image-preview')).toBeTruthy();
@@ -202,13 +202,13 @@ describe('PreviewGroup', () => {
     rerender(
       <Image.PreviewGroup preview={{ open: false }}>
         <Image src="src1" />
-      </Image.PreviewGroup>,
+      </Image.PreviewGroup>
     );
     act(() => {
       jest.runAllTimers();
     });
 
-    expect(document.querySelector('.rc-image-preview')).toBeFalsy();
+    expect(document.querySelector('.rc-image-preview')).toBeTruthy();
   });
 
   it('should show error img', () => {

From 7ef9fcca519251601b385ac1ec2daf9bce588db1 Mon Sep 17 00:00:00 2001
From: zenggpzqbx <zenggpzqbx@163.com>
Date: Thu, 25 Dec 2025 01:03:08 +0800
Subject: [PATCH 4/4] fix(Image): Image mask fade enter blur transition does
 not work

---
 src/Preview/index.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index e639519..574ac58 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -393,12 +393,20 @@ const Preview: React.FC<PreviewProps> = props => {
         className={clsx(prefixCls, rootClassName, classNames.root, { [`${prefixCls}-moving`]: isMoving })}
         style={{ ...styles.root, ...(zIndex ? { zIndex } : {}) }}>
         {/* Mask */}
-        {open && (<div
-            className={clsx(`${prefixCls}-mask`, classNames.mask)}
-            style={styles.mask}
-            onClick={onClose}
-          />
-        )}
+        <CSSMotion
+          motionName={motionName}
+          visible={portalRender && open}
+          motionAppear
+          motionEnter
+          motionLeave>
+          {({ className: motionClassName, style: motionStyle }) => {
+            return (<div
+              className={clsx(`${prefixCls}-mask`, classNames.mask, motionClassName)}
+              style={{ ...styles.mask, ...motionStyle }}
+              onClick={onClose}
+            />);
+          }}
+        </CSSMotion>
         <CSSMotion
           motionName={motionName}
           visible={portalRender && open}