diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index 2aab1c8..574ac58 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -387,104 +387,105 @@ const Preview: React.FC<PreviewProps> = props => {
   if (mousePosition) {
     bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
   }
-
   return (
     <Portal open={portalRender} 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 */}
+      <div
+        className={clsx(prefixCls, rootClassName, classNames.root, { [`${prefixCls}-moving`]: isMoving })}
+        style={{ ...styles.root, ...(zIndex ? { zIndex } : {}) }}>
+        {/* Mask */}
+        <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}
+          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>
   );
 };
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', () => {