@arco-design/mobile-react 2.30.2 → 2.30.4

package/esm/image/index.js

@@ -121,7 +121,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
       // 图片有宽高认为正常加载，否则认为加载错误
       // @en If the image has width and height, it is considered to be loaded normally, otherwise it is considered to be a loading error
       if (imageDomRef.current.naturalWidth || imageDomRef.current.naturalHeight) {
-        handleImageLoaded(null, imageDomRef.current);
+        handleStaticImageLoaded(null, imageDomRef.current);
       } else {
         handleStaticImageError(null);
       }
@@ -147,7 +147,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }
 
-  function handleImageLoaded(evt, image) {
+  function handleImageLoaded(image) {
     hasLoadedRef.current = true;
     changeStatus('loaded');
     var _image$width = image.width,
@@ -181,7 +181,6 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
 
     extraClass && image.classList.add(extraClass);
     setWrapClass(extraClass ? extraClass + "-container" : '');
-    onLoad && onLoad(evt, image);
   }
 
   function loadImage(isFromRetry) {
@@ -209,8 +208,9 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     image.onload = function (evt) {
       loadingImageRef.current = null;
       imageDomRef.current = image;
-      handleImageLoaded(evt, image);
+      handleImageLoaded(image);
       replaceChild(image);
+      onLoad && onLoad(evt, image);
     };
 
     image.onerror = function (evt) {
@@ -235,6 +235,11 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }
 
+  function handleStaticImageLoaded(evt, image) {
+    handleImageLoaded(image);
+    onLoad && onLoad(evt, image);
+  }
+
   function handleStaticImageError(e) {
     var evt = e ? e.nativeEvent : null;
 
@@ -304,7 +309,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     }, staticLabel && showImage && !staticRetrying ? /*#__PURE__*/React.createElement("img", _extends({}, nativeProps, attrs, {
       ref: imageDomRef,
       onLoad: function onLoad(e) {
-        return handleImageLoaded(e.nativeEvent, imageDomRef.current);
+        return handleStaticImageLoaded(e.nativeEvent, imageDomRef.current);
       },
       onError: handleStaticImageError
     })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/React.createElement("div", {

package/esm/image/style/css/index.css

@@ -4,7 +4,7 @@
  * @name_en General Mixin
  */
 /**
- * 根据base-font-size，设置单位尺寸为rem
+ * 根据 base-font-size，设置单位尺寸为 rem
  * @desc {en} set the unit size to rem based on base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -21,7 +21,7 @@
  * ```
  */
 /**
- * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
+ * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
  * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -38,8 +38,8 @@
  * ```
  */
 /**
- * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
- * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
+ * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
+ * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
  * @param @rules 对应的暗黑模式规则
  * @param @rules {en} Corresponding dark mode rules
  * @example
@@ -54,7 +54,7 @@
  * ```
  */
 /**
- * 为属性设置arco提供的token变量
+ * 为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute
  * @param @property css属性名
  * @param @property {en} css property
@@ -76,11 +76,11 @@
  * ```
  */
 /**
- * 在常规模式和rtl模式下为属性设置arco提供的token变量
+ * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
- * @param @variables token变量名
+ * @param @variables token 变量名
  * @param @variables {en} token variable name
  * @param @preValues
  * @param @preValues {en}
@@ -96,9 +96,9 @@
  * ```
  */
 /**
- * 0.5px的边框线
+ * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
- * @param @color 使用css变量为线设置颜色
+ * @param @color 使用 css 变量为线设置颜色
  * @param @color {en} set border-color by CSS variable
  * @param @direction 边框方向，默认为全部方向
  * @param @direction {en} border direction，default to all directions.
@@ -115,9 +115,9 @@
 /**
  * 字体加粗
  * @desc {en} font bold
- * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
  * @param @color {en} set color by CSS variable
- * @param @stroke 字体粗细，默认0.3px
+ * @param @stroke 字体粗细，默认 0.3px
  * @param @stroke {en} font weight, default 0.3 pixel
  * @example
  * ```
@@ -130,17 +130,17 @@
  * ```
  */
 /**
- * 1px边框
+ * 1px 边框
  * @desc {en} 1 pixel border
  * @param @direction 边框方向
  * @param @direction {en} border direction
- * @param @borderColor 使用css变量设置边框颜色
+ * @param @borderColor 使用 css 变量设置边框颜色
  * @param @borderColor {en} set border-color by CSS variable
- * @param @borderRadius border-radius，默认为0
+ * @param @borderRadius border-radius，默认为 0
  * @param @borderRadius {en} border-radius, default value is 0
- * @param @borderWidth border-width，默认为1px
+ * @param @borderWidth border-width，默认为 1px
  * @param @borderWidth {en} border-width, default value is 1 pixel
- * @param @borderStyle border-style，默认为solid
+ * @param @borderStyle border-style，默认为 solid
  * @param @borderStyle {en} border-style, default value is solid
  * @example
  * ```
@@ -153,9 +153,9 @@
  * ```
  */
 /**
- * 元素右下0.5px边框
+ * 元素右下 0.5px 边框
  * @desc {en} 0.5px border on bottom right
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -167,9 +167,9 @@
  * ```
  */
 /**
- * 元素左上0.5px边框
+ * 元素左上 0.5px 边框
  * @desc {en} 0.5px border on top left
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -181,9 +181,9 @@
  * ```
  */
 /**
- * 设置Loading组件颜色
+ * 设置 Loading 组件颜色
  * @desc {en} set Loading component color
- * @param @color 使用css变量设置颜色
+ * @param @color 使用 css 变量设置颜色
  * @param @color {en} set color by CSS variable
  * @example
  * ```
@@ -197,9 +197,9 @@
 /**
  * 设置最小字号
  * @desc {en} set minimum font-size
- * @param @size 使用css变量设置最小字号
+ * @param @size 使用 css 变量设置最小字号
  * @param @size {en} set minimum font-size by CSS variable
- * @param @scale 设置最小字号下文字缩放比例，默认为0.9
+ * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
  * @param @scale {en} set minimum font-size down text scale，default value is 0.9
  * @example
  * ```
@@ -212,9 +212,9 @@
  * ```
  */
 /**
- * 设置content-box盒模型下元素宽度
+ * 设置 content-box 盒模型下元素宽度
  * @desc {en} set box width in content-box
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
  * @param @width 元素总宽度，包含内边距
  * @param @width element width, include padding
@@ -232,11 +232,11 @@
  * ```
  */
 /**
- * 设置Steps组件颜色
+ * 设置 Steps 组件颜色
  * @desc {en} set Steps component color
- * @param @color 使用css变量设置主颜色
+ * @param @color 使用 css 变量设置主颜色
  * @param @color {en} set main step color by CSS variable
- * @param @finish-color 使用css变量设置已完成步骤的颜色
+ * @param @finish-color 使用 css 变量设置已完成步骤的颜色
  * @param @finish-color {en} set finished step color by CSS variable
  * @example
  * ```

package/esm/image/style/index.less

@@ -150,7 +150,7 @@
  *               Arco Theme Style                  *
  *                                                 *
  ***************************************************/
-    & when (@use-dark-mode = 1) {
+& when (@use-dark-mode = 1) {
     
   .process-bg-color-with-config,
   .process-custom-icon-bg-color-with-config {

package/esm/image-picker/style/css/index.css

@@ -4,7 +4,7 @@
  * @name_en General Mixin
  */
 /**
- * 根据base-font-size，设置单位尺寸为rem
+ * 根据 base-font-size，设置单位尺寸为 rem
  * @desc {en} set the unit size to rem based on base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -21,7 +21,7 @@
  * ```
  */
 /**
- * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
+ * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
  * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -38,8 +38,8 @@
  * ```
  */
 /**
- * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
- * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
+ * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
+ * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
  * @param @rules 对应的暗黑模式规则
  * @param @rules {en} Corresponding dark mode rules
  * @example
@@ -54,7 +54,7 @@
  * ```
  */
 /**
- * 为属性设置arco提供的token变量
+ * 为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute
  * @param @property css属性名
  * @param @property {en} css property
@@ -76,11 +76,11 @@
  * ```
  */
 /**
- * 在常规模式和rtl模式下为属性设置arco提供的token变量
+ * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
- * @param @variables token变量名
+ * @param @variables token 变量名
  * @param @variables {en} token variable name
  * @param @preValues
  * @param @preValues {en}
@@ -96,9 +96,9 @@
  * ```
  */
 /**
- * 0.5px的边框线
+ * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
- * @param @color 使用css变量为线设置颜色
+ * @param @color 使用 css 变量为线设置颜色
  * @param @color {en} set border-color by CSS variable
  * @param @direction 边框方向，默认为全部方向
  * @param @direction {en} border direction，default to all directions.
@@ -115,9 +115,9 @@
 /**
  * 字体加粗
  * @desc {en} font bold
- * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
  * @param @color {en} set color by CSS variable
- * @param @stroke 字体粗细，默认0.3px
+ * @param @stroke 字体粗细，默认 0.3px
  * @param @stroke {en} font weight, default 0.3 pixel
  * @example
  * ```
@@ -130,17 +130,17 @@
  * ```
  */
 /**
- * 1px边框
+ * 1px 边框
  * @desc {en} 1 pixel border
  * @param @direction 边框方向
  * @param @direction {en} border direction
- * @param @borderColor 使用css变量设置边框颜色
+ * @param @borderColor 使用 css 变量设置边框颜色
  * @param @borderColor {en} set border-color by CSS variable
- * @param @borderRadius border-radius，默认为0
+ * @param @borderRadius border-radius，默认为 0
  * @param @borderRadius {en} border-radius, default value is 0
- * @param @borderWidth border-width，默认为1px
+ * @param @borderWidth border-width，默认为 1px
  * @param @borderWidth {en} border-width, default value is 1 pixel
- * @param @borderStyle border-style，默认为solid
+ * @param @borderStyle border-style，默认为 solid
  * @param @borderStyle {en} border-style, default value is solid
  * @example
  * ```
@@ -153,9 +153,9 @@
  * ```
  */
 /**
- * 元素右下0.5px边框
+ * 元素右下 0.5px 边框
  * @desc {en} 0.5px border on bottom right
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -167,9 +167,9 @@
  * ```
  */
 /**
- * 元素左上0.5px边框
+ * 元素左上 0.5px 边框
  * @desc {en} 0.5px border on top left
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -181,9 +181,9 @@
  * ```
  */
 /**
- * 设置Loading组件颜色
+ * 设置 Loading 组件颜色
  * @desc {en} set Loading component color
- * @param @color 使用css变量设置颜色
+ * @param @color 使用 css 变量设置颜色
  * @param @color {en} set color by CSS variable
  * @example
  * ```
@@ -197,9 +197,9 @@
 /**
  * 设置最小字号
  * @desc {en} set minimum font-size
- * @param @size 使用css变量设置最小字号
+ * @param @size 使用 css 变量设置最小字号
  * @param @size {en} set minimum font-size by CSS variable
- * @param @scale 设置最小字号下文字缩放比例，默认为0.9
+ * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
  * @param @scale {en} set minimum font-size down text scale，default value is 0.9
  * @example
  * ```
@@ -212,9 +212,9 @@
  * ```
  */
 /**
- * 设置content-box盒模型下元素宽度
+ * 设置 content-box 盒模型下元素宽度
  * @desc {en} set box width in content-box
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
  * @param @width 元素总宽度，包含内边距
  * @param @width element width, include padding
@@ -232,11 +232,11 @@
  * ```
  */
 /**
- * 设置Steps组件颜色
+ * 设置 Steps 组件颜色
  * @desc {en} set Steps component color
- * @param @color 使用css变量设置主颜色
+ * @param @color 使用 css 变量设置主颜色
  * @param @color {en} set main step color by CSS variable
- * @param @finish-color 使用css变量设置已完成步骤的颜色
+ * @param @finish-color 使用 css 变量设置已完成步骤的颜色
  * @param @finish-color {en} set finished step color by CSS variable
  * @example
  * ```

package/esm/image-picker/style/index.less

@@ -120,7 +120,7 @@
  *               Arco Theme Style                  *
  *                                                 *
  ***************************************************/
-    & when (@use-dark-mode = 1) {
+& when (@use-dark-mode = 1) {
     
   .process-bg-color-with-config,
   .process-custom-icon-bg-color-with-config {

package/esm/image-preview/index.d.ts

@@ -18,6 +18,12 @@ export interface PreviewImageProps {
      * @en Transition image url
      */
     fallbackSrc?: string;
+    /**
+     * 过渡图到原图放大动效完成后，移除过渡图的延迟时间(ms)，一般当原图过大时有调整需求
+     * @en After the transition image to the original image enlargement effect is completed, the delay time (ms) before the transition image is removed
+     * @default 30
+     */
+    transitionEndDelay?: number;
     /**
      * 缩略图填充方式（backgroundPosition），默认top center
      * @en Thumbnail fill mode (backgroundPosition), default value is top center
@@ -29,7 +35,7 @@ export interface PreviewImageProps {
      */
     extraNode?: ReactNode;
 }
-export interface ImagePreviewProps extends Pick<CarouselProps, 'animateDurationSlide' | 'showIndicator' | 'hideSingleIndicator' | 'indicatorPos' | 'percentToChange' | 'distanceToChange' | 'speedToChange' | 'swipeable'> {
+export interface ImagePreviewProps extends Pick<CarouselProps, 'animateDurationSlide' | 'showIndicator' | 'hideSingleIndicator' | 'indicatorPos' | 'percentToChange' | 'distanceToChange' | 'speedToChange' | 'swipeable' | 'offsetBetween' | 'renderExtra'> {
     /**
      * 自定义样式
      * @en Custom stylesheet
@@ -274,9 +280,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      * @param {ImagePreviewProps} config configuration
      * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "onClose" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "onClose" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "offsetBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "renderExtra" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "onClose" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "onClose" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "offsetBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "renderExtra" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
     };
 };
 /**

package/esm/image-preview/index.js

@@ -145,7 +145,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       transformersRef.current = []; // 移除过渡图片
       // @en Remove transition image
 
-      removeChild(document.querySelector('.image-preview-fake-trans-image'));
+      removeChild(transImageRef.current);
       setTransImageInfo(null);
       setPlaceholders({});
       var mounted = isInitialMount.current;
@@ -188,7 +188,9 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
 
   function removeChild(child) {
     try {
-      child && document.body.removeChild(child);
+      var _domRef$current, _domRef$current$query, _domRef$current$query2;
+
+      child && ((_domRef$current = domRef.current) == null ? void 0 : (_domRef$current$query = _domRef$current.querySelectorAll('.carousel-item')) == null ? void 0 : (_domRef$current$query2 = _domRef$current$query[innerIndexRef.current]) == null ? void 0 : _domRef$current$query2.removeChild(child));
     } catch (e) {}
   } // 监听滑动到上下边缘后还在往外滑动的操作，则关闭弹窗
   // @en Monitor the operation of sliding out after sliding to the upper and lower edges, then close the popup
@@ -607,7 +609,45 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }
 
-  var handleClick = useSingleAndDoubleClick(handleImageClick, handleImageDoubleClick);
+  var handleClick = useSingleAndDoubleClick(handleImageClick, handleImageDoubleClick); // 当使用 getThumbBounds 时，关闭图片预览有缩小效果
+  // @en When using getThumbBounds, closing the image preview has a shrinking effect
+
+  function animateBeforeClose() {
+    var _imagesRef$current$in2;
+
+    if (isTransformed()) {
+      return;
+    }
+
+    var index = innerIndexRef.current;
+    var imageDom = (_imagesRef$current$in2 = imagesRef.current[index]) == null ? void 0 : _imagesRef$current$in2.image;
+    var thumbBounds = getThumbBounds == null ? void 0 : getThumbBounds(index);
+
+    if (!imageDom || !thumbBounds || !thumbBounds.width || !thumbBounds.height) {
+      return;
+    } // 小图超过一半在视野外时，不展示缩小效果
+    // @en When more than half of the thumbnail is outside the field of view, the zoom effect will not be displayed
+
+
+    if (thumbBounds.top < -1 * thumbBounds.height / 2 || thumbBounds.top > windowHeight - thumbBounds.height / 2 || thumbBounds.left < -1 * thumbBounds.width / 2 || thumbBounds.left > windowWidth - thumbBounds.width / 2) {
+      return;
+    }
+
+    var imageDomRect = imageDom.getBoundingClientRect();
+
+    if (!imageDomRect.width || !imageDomRect.height) {
+      return;
+    }
+
+    imageDom.classList.add('closing-animation');
+    setImageBounds(imageDom, imageDomRect, imageDomRect);
+    imageDom.style.objectPosition = images[index].thumbPosition || 'top center';
+    nextTick(function () {
+      imageDom.style.transitionDuration = displayDuration + "ms";
+      imageDom.style.webkitTransitionDuration = displayDuration + "ms";
+      setImageBounds(imageDom, thumbBounds, imageDomRect);
+    });
+  }
 
   function goClose(e) {
     if (closingRef.current) {
@@ -615,6 +655,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     closingRef.current = true;
+    animateBeforeClose();
     close(e);
   }
   /**
@@ -637,7 +678,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
 
 
   function setDisplayAnimation(index) {
-    var _imagesStatusRef$curr4;
+    var _imagesStatusRef$curr4, _domRef$current2, _domRef$current2$quer, _domRef$current2$quer2;
 
     var firstLoaded = (_imagesStatusRef$curr4 = imagesStatusRef.current[index]) == null ? void 0 : _imagesStatusRef$curr4.firstLoaded;
     var fallbackSrc = replaceFallbackWhenLoaded && firstLoaded ? images[index].src : images[index].fallbackSrc; // 用户设置了getThumbBounds和images的fallbackSrc属性才有放大过渡效果
@@ -668,7 +709,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     transImage.style.opacity = '0';
     transImage.style.transitionDuration = displayDuration + "ms";
     transImage.style.webkitTransitionDuration = displayDuration + "ms";
-    document.body.appendChild(transImage); // 拿到放大之后的位置rect，没拿到就取消小图放大效果
+    (_domRef$current2 = domRef.current) == null ? void 0 : (_domRef$current2$quer = _domRef$current2.querySelectorAll('.carousel-item')) == null ? void 0 : (_domRef$current2$quer2 = _domRef$current2$quer[index]) == null ? void 0 : _domRef$current2$quer2.prepend(transImage); // 拿到放大之后的位置rect，没拿到就取消小图放大效果
     // @en Get the zoomed-in position rect, and cancel the zoom-in effect if not getting it
 
     getNewImageBounds(index, fallbackSrc, transImage, function (rect) {
@@ -690,9 +731,10 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
             return _extends({}, holders, (_extends3 = {}, _extends3[index] = true, _extends3));
           });
         }, Math.max(0, displayDuration - 80));
+        var transitionEndDelay = images[index].transitionEndDelay || 30;
         setTimeout(function () {
           resetAnimation(index);
-        }, displayDuration + 30);
+        }, displayDuration + transitionEndDelay);
       });
     });
   }
@@ -776,10 +818,10 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
         boxHeight: windowHeight,
         bottomOverlap: null
       }, getImageProps(image, index))));
-      return image.extraNode ? /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "preview-image-wrap-container",
         key: "outer-" + index
-      }, innerNode, image.extraNode) : innerNode;
+      }, innerNode, image.extraNode);
     }));
   }
 
@@ -851,18 +893,14 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     }) : null;
   }
 
-  function renderLoadingArea(index) {
-    // loadingArea提出来，放到过渡图上层
-    // @en The loadingArea is extracted and placed on the upper layer of the transition image
-    return index === openIndex ? /*#__PURE__*/React.createElement(Portal, {
-      getContainer: getContainer
-    }, /*#__PURE__*/React.createElement("div", {
+  function renderLoadingArea() {
+    return /*#__PURE__*/React.createElement("div", {
       className: "image-preview-loading-area"
     }, loadingArea || /*#__PURE__*/React.createElement(Loading, {
       type: "circle",
       className: "loading-icon",
       radius: 7
-    }))) : loadingArea;
+    }));
   }
 
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref3) {
@@ -910,7 +948,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
           imagesRef.current[index] = r;
         },
         showLoading: showLoading,
-        loadingArea: renderLoadingArea(index),
+        loadingArea: renderLoadingArea(),
         errorArea: errorArea,
         showError: showError,
         retryTime: retryTime,