@nutui/nutui-react-taro 3.0.19-cpp.26-beta.1 → 3.0.19-cpp.26-beta.2

package/dist/cjs/packages/popup/popup.js

@@ -22,6 +22,7 @@ var _reactdom = require("react-dom");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _components = require("@tarojs/components");
+var _ConfigurableCSSTransition = /*#__PURE__*/ _interop_require_default._(require("../../utils/taro/ConfigurableCSSTransition"));
 var _getrect = require("../../utils/taro/get-rect");
 var _overlay = require("../overlay/overlay");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
@@ -59,54 +60,57 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overla
 var _zIndex = 1100;
 var Popup = function Popup(props) {
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, top = _$_object_spread.top, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, resizable = _$_object_spread.resizable, minHeight = _$_object_spread.minHeight, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick, onTouchStart = _$_object_spread.onTouchStart, onTouchMove = _$_object_spread.onTouchMove, onTouchEnd = _$_object_spread.onTouchEnd, closeAriaLabel = _$_object_spread.closeAriaLabel;
-    var innerIndex = zIndex || _zIndex;
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)(innerIndex), 2), index = _useState[0], setIndex = _useState[1];
+    var locale = (0, _configprovider.useConfig)().locale;
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(zIndex || _zIndex), 2), index = _useState[0], setIndex = _useState[1];
     var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(visible), 2), innerVisible = _useState1[0], setInnerVisible = _useState1[1];
     var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(true), 2), showChildren = _useState2[0], setShowChildren = _useState2[1];
-    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), transitionName = _useState3[0], setTransitionName = _useState3[1];
     var nodeRef = (0, _uselockscoll.useLockScrollTaro)(innerVisible && lockScroll);
-    var topNodeRef = _react.default.useRef(null);
+    var topNodeRef = (0, _react.useRef)(null);
     var rootRect = (0, _react.useRef)(null);
     var touchStartRef = (0, _react.useRef)(0);
     var touchMoveDistanceRef = (0, _react.useRef)(0);
     var heightRef = (0, _react.useRef)(0);
     var defaultHeightRef = (0, _react.useRef)(0);
     var isTouching = (0, _react.useRef)(false);
-    var locale = (0, _configprovider.useConfig)().locale;
     var classPrefix = 'nut-popup';
-    var overlayStyles = (0, _object_spread._)({}, overlayStyle);
-    var contentZIndex = (0, _platform.harmony)() ? index + 1 : index // 解决harmony层级问题
-    ;
-    var popStyles = (0, _object_spread._)({
-        zIndex: contentZIndex,
-        minHeight: minHeight
-    }, style);
-    var _obj;
-    var popClassName = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
-    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), popupHeight = _useState4[0], setPopupHeight = _useState4[1];
-    var _useState5 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), topBottom = _useState5[0], setTopBottom = _useState5[1];
-    var resizeStyles = function resizeStyles() {
-        if (popupHeight !== '') {
-            return {
-                height: popupHeight
-            };
-        }
-    };
-    var open = function open() {
-        if (!innerVisible) {
-            // 当高度改变后，再次打开时，将高度置为初始高度
-            if (position === 'bottom' && resizable && nodeRef.current && heightRef.current) {
-                setPopupHeight((0, _pxtransform.pxTransform)(defaultHeightRef.current));
-            }
-            setInnerVisible(true);
-            setIndex(++innerIndex);
-        }
-        if (destroyOnClose) {
-            setShowChildren(true);
-        }
-        onOpen && onOpen();
-    };
-    var getPopupHeight = function getPopupHeight() {
+    var transitionName = (0, _react.useMemo)(function() {
+        return transition || "".concat(classPrefix, "-slide-").concat(position);
+    }, [
+        transition,
+        position
+    ]);
+    var overlayStyles = (0, _react.useMemo)(function() {
+        return (0, _object_spread._)({}, overlayStyle);
+    }, [
+        overlayStyle
+    ]);
+    var contentZIndex = (0, _react.useMemo)(function() {
+        return (0, _platform.harmony)() ? index + 1 : index // 解决harmony层级问题
+        ;
+    }, [
+        index
+    ]);
+    var popStyles = (0, _react.useMemo)(function() {
+        return (0, _object_spread._)({
+            zIndex: contentZIndex,
+            minHeight: minHeight
+        }, style);
+    }, [
+        contentZIndex,
+        minHeight,
+        style
+    ]);
+    var popClassName = (0, _react.useMemo)(function() {
+        var _obj;
+        return (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
+    }, [
+        round,
+        position,
+        className
+    ]);
+    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), popupHeight = _useState3[0], setPopupHeight = _useState3[1];
+    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), topBottom = _useState4[0], setTopBottom = _useState4[1];
+    var getPopupHeight = (0, _react.useCallback)(function() {
         return (0, _async_to_generator._)(function() {
             var _nodeRef_current, rect, height;
             return (0, _ts_generator._)(this, function(_state) {
@@ -126,19 +130,36 @@ var Popup = function Popup(props) {
                 }
             });
         })();
-    };
-    (0, _react.useEffect)(function() {
-        if (innerVisible && topNodeRef.current && nodeRef.current) {
-            (0, _taro.nextTick)(function() {
-                (0, _taro.nextTick)(function() {
-                    getPopupHeight();
-                });
+    }, [
+        nodeRef
+    ]);
+    var open = (0, _react.useCallback)(function() {
+        if (!innerVisible) {
+            // 当高度改变后，再次打开时，将高度置为初始高度
+            if (position === 'bottom' && resizable && nodeRef.current && heightRef.current) {
+                setPopupHeight((0, _pxtransform.pxTransform)(defaultHeightRef.current));
+            }
+            setInnerVisible(true);
+            setIndex(function(prev) {
+                return prev + 1;
             });
         }
+        if (destroyOnClose) {
+            setShowChildren(true);
+        }
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     }, [
-        innerVisible
+        innerVisible,
+        position,
+        resizable,
+        destroyOnClose,
+        onOpen,
+        nodeRef,
+        setInnerVisible,
+        setIndex,
+        setShowChildren
     ]);
-    var close = function close() {
+    var close = (0, _react.useCallback)(function() {
         if (innerVisible) {
             setInnerVisible(false);
             if (destroyOnClose) {
@@ -146,28 +167,70 @@ var Popup = function Popup(props) {
                     setShowChildren(false);
                 }, Number(duration));
             }
-            onClose && onClose();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         }
-    };
-    var handleOverlayClick = function handleOverlayClick(e) {
+    }, [
+        innerVisible,
+        destroyOnClose,
+        duration,
+        onClose,
+        setInnerVisible,
+        setShowChildren
+    ]);
+    (0, _react.useEffect)(function() {
+        visible ? open() : close();
+    }, [
+        visible,
+        open,
+        close
+    ]);
+    (0, _react.useEffect)(function() {
+        if (innerVisible && topNodeRef.current && nodeRef.current) {
+            (0, _taro.nextTick)(function() {
+                (0, _taro.nextTick)(function() {
+                    getPopupHeight();
+                });
+            });
+        }
+    }, [
+        innerVisible,
+        getPopupHeight,
+        nodeRef
+    ]);
+    var handleOverlayClick = (0, _react.useCallback)(function(e) {
         e.stopPropagation();
         if (closeOnOverlayClick && onOverlayClick(e)) {
             close();
         }
-    };
-    var handleCloseIconClick = function handleCloseIconClick(e) {
+    }, [
+        closeOnOverlayClick,
+        onOverlayClick,
+        close
+    ]);
+    var handleCloseIconClick = (0, _react.useCallback)(function(e) {
         onCloseIconClick(e) && close();
-    };
-    var renderCloseIcon = function renderCloseIcon() {
+    }, [
+        onCloseIconClick,
+        close
+    ]);
+    var renderCloseIcon = (0, _react.useCallback)(function() {
+        if (!closeable) return null;
         var closeClasses = (0, _classnames.default)("".concat(classPrefix, "-title-right"), "".concat(classPrefix, "-title-right-").concat(closeIconPosition));
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, closeable && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: closeClasses,
             onClick: handleCloseIconClick,
             ariaRole: "button",
             ariaLabel: closeAriaLabel || locale.close
-        }, /*#__PURE__*/ _react.default.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null)));
-    };
-    var renderTop = function renderTop() {
+        }, /*#__PURE__*/ _react.default.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null));
+    }, [
+        closeable,
+        closeIconPosition,
+        handleCloseIconClick,
+        closeAriaLabel,
+        locale.close,
+        closeIcon
+    ]);
+    var renderTop = (0, _react.useCallback)(function() {
         if (!top) return null;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-bottom-top"),
@@ -176,8 +239,11 @@ var Popup = function Popup(props) {
                 bottom: topBottom
             }
         }, top);
-    };
-    var renderTitle = function renderTitle() {
+    }, [
+        top,
+        topBottom
+    ]);
+    var renderTitle = (0, _react.useCallback)(function() {
         if (left || title || description) {
             return /*#__PURE__*/ _react.default.createElement(_components.View, {
                 className: "".concat(classPrefix, "-title")
@@ -194,8 +260,15 @@ var Popup = function Popup(props) {
         if (closeable) {
             return renderCloseIcon();
         }
-    };
-    var handleTouchStart = function handleTouchStart(event) {
+    }, [
+        left,
+        title,
+        description,
+        position,
+        closeable,
+        renderCloseIcon
+    ]);
+    var handleTouchStart = (0, _react.useCallback)(function(event) {
         return (0, _async_to_generator._)(function() {
             var _nodeRef_current, _rootRect_current, e, rect;
             return (0, _ts_generator._)(this, function(_state) {
@@ -225,8 +298,13 @@ var Popup = function Popup(props) {
                 }
             });
         })();
-    };
-    var handleTouchMove = function handleTouchMove(event) {
+    }, [
+        position,
+        resizable,
+        onTouchStart,
+        nodeRef
+    ]);
+    var handleTouchMove = (0, _react.useCallback)(function(event) {
         if (position !== 'bottom' || !resizable || !nodeRef.current || !rootRect.current) return;
         var e = event;
         e.stopPropagation();
@@ -245,21 +323,42 @@ var Popup = function Popup(props) {
             }
         };
         requestAnimationFrame(handleMove);
-    };
-    var handleTouchEnd = function handleTouchEnd(event) {
+    }, [
+        position,
+        resizable,
+        minHeight,
+        onTouchMove,
+        nodeRef
+    ]);
+    var handleTouchEnd = (0, _react.useCallback)(function(event) {
         if (position !== 'bottom' || !resizable || !nodeRef.current || !rootRect.current) return;
         var e = event;
         isTouching.current = false;
         var min = typeof minHeight === 'number' ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
         var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
         onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(currentHeight, e);
-    };
+    }, [
+        position,
+        resizable,
+        minHeight,
+        onTouchEnd,
+        nodeRef
+    ]);
     var renderPop = function renderPop() {
-        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+        return /*#__PURE__*/ _react.default.createElement(_ConfigurableCSSTransition.default, {
+            nodeRef: nodeRef,
+            classNames: transitionName,
+            mountOnEnter: true,
+            unmountOnExit: destroyOnClose,
+            timeout: Number(duration),
+            in: innerVisible,
+            onEntered: afterShow,
+            onExited: afterClose
+        }, /*#__PURE__*/ _react.default.createElement(_components.View, {
             ref: nodeRef,
-            style: (0, _object_spread._)((0, _object_spread_props._)((0, _object_spread._)({}, popStyles), {
-                display: innerVisible ? (popStyles === null || popStyles === void 0 ? void 0 : popStyles.display) || 'block' : 'none'
-            }), resizeStyles()),
+            style: (0, _object_spread._)({}, popStyles, popupHeight ? {
+                height: popupHeight
+            } : {}),
             className: popClassName,
             onClick: onClick,
             catchMove: lockScroll,
@@ -267,24 +366,8 @@ var Popup = function Popup(props) {
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
             onTouchCancel: handleTouchEnd
-        }, renderTop(), renderTitle(), showChildren ? children : null);
+        }, renderTop(), renderTitle(), showChildren ? children : null));
     };
-    // const renderPop = () => {
-    // return (
-    //   <CSSTransition
-    //     nodeRef={nodeRef}
-    //     classNames={transitionName}
-    //     mountOnEnter
-    //     unmountOnExit={destroyOnClose}
-    //     timeout={duration}
-    //     in={innerVisible}
-    //     onEntered={afterShow}
-    //     onExited={afterClose}
-    //   >
-    //     {renderContent()}
-    //   </CSSTransition>
-    // )
-    // }
     var renderNode = function renderNode() {
         return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, overlay ? /*#__PURE__*/ _react.default.createElement(_index.default, {
             zIndex: index,
@@ -297,17 +380,6 @@ var Popup = function Popup(props) {
             onClick: handleOverlayClick
         }) : null, renderPop());
     };
-    (0, _react.useEffect)(function() {
-        visible ? open() : close();
-    }, [
-        visible
-    ]);
-    (0, _react.useEffect)(function() {
-        setTransitionName(transition || "".concat(classPrefix, "-slide-").concat(position));
-    }, [
-        position,
-        transition
-    ]);
     var resolveContainer = function resolveContainer(getContainer) {
         return (typeof getContainer === 'function' ? getContainer() : getContainer) || document.body;
     };

package/dist/cjs/packages/popup/style/popup.scss

@@ -219,6 +219,9 @@
     }
 
     @keyframes popup-slide-top-exit {
+      from {
+        transform: translate3d(0, 0%, 0);
+      }
       to {
         transform: translate3d(0, -100%, 0);
       }
@@ -249,6 +252,9 @@
     }
 
     @keyframes popup-slide-right-exit {
+      from {
+        transform: translate3d(0%, 0, 0);
+      }
       to {
         transform: translate3d(100%, 0, 0);
       }
@@ -262,7 +268,7 @@
       animation-duration: $popup-animation-duration;
     }
 
-    &-right-exit {
+    &-right-exit-active {
       animation-fill-mode: both;
       animation-name: popup-slide-right-exit;
       animation-duration: $popup-animation-duration;
@@ -278,7 +284,10 @@
       }
     }
 
-    @keyframes slide-bottom-exit {
+    @keyframes popup-slide-bottom-exit {
+      from {
+        transform: translate3d(0, 0%, 0);
+      }
       to {
         transform: translate3d(0, 100%, 0);
       }
@@ -286,15 +295,15 @@
 
     &-bottom-enter-active,
     &-bottom-appear-active {
-      transform: translate(0, 0);
+      transform: translate3d(0, 0, 0);
       animation-fill-mode: both;
       animation-name: popup-slide-bottom-enter;
       animation-duration: $popup-animation-duration;
     }
 
-    &-bottom-exit {
+    &-bottom-exit-active {
       animation-fill-mode: both;
-      animation-name: slide-bottom-exit;
+      animation-name: popup-slide-bottom-exit;
       animation-duration: $popup-animation-duration;
     }
 
@@ -309,6 +318,9 @@
     }
 
     @keyframes popup-slide-left-exit {
+      from {
+        transform: translate3d(0%, 0, 0);
+      }
       to {
         transform: translate3d(-100%, 0, 0);
       }
@@ -316,14 +328,13 @@
 
     &-left-enter-active,
     &-left-appear-active {
-      transform: translate(0, 0);
+      transform: translate3d(0, 0, 0);
       animation-fill-mode: both;
       animation-name: popup-slide-left-enter;
       animation-duration: $popup-animation-duration;
     }
 
-    &-left-exit-active,
-    &-left-exit-done {
+    &-left-exit-active {
       animation-fill-mode: both;
       animation-name: popup-slide-left-exit;
       animation-duration: $popup-animation-duration;

package/dist/cjs/packages/popup/style/style.css

@@ -197,6 +197,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -221,6 +224,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -231,7 +237,7 @@
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-right-exit {
+.nut-popup-slide-right-exit-active {
   animation-fill-mode: both;
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -244,20 +250,23 @@
     transform: translate3d(0, 0%, 0);
   }
 }
-@keyframes slide-bottom-exit {
+@keyframes popup-slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  transform: translate(0, 0);
+  transform: translate3d(0, 0, 0);
   animation-fill-mode: both;
   animation-name: popup-slide-bottom-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-bottom-exit {
+.nut-popup-slide-bottom-exit-active {
   animation-fill-mode: both;
-  animation-name: slide-bottom-exit;
+  animation-name: popup-slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
 @keyframes popup-slide-left-enter {
@@ -269,17 +278,20 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
-  transform: translate(0, 0);
+  transform: translate3d(0, 0, 0);
   animation-fill-mode: both;
   animation-name: popup-slide-left-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-left-exit-active, .nut-popup-slide-left-exit-done {
+.nut-popup-slide-left-exit-active {
   animation-fill-mode: both;
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);

package/dist/cjs/packages/popup/style/style.harmony.css

@@ -251,6 +251,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -275,6 +278,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -285,7 +291,7 @@
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-right-exit {
+.nut-popup-slide-right-exit-active {
   animation-fill-mode: both;
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -298,20 +304,23 @@
     transform: translate3d(0, 0%, 0);
   }
 }
-@keyframes slide-bottom-exit {
+@keyframes popup-slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  transform: translate(0, 0);
+  transform: translate3d(0, 0, 0);
   animation-fill-mode: both;
   animation-name: popup-slide-bottom-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-bottom-exit {
+.nut-popup-slide-bottom-exit-active {
   animation-fill-mode: both;
-  animation-name: slide-bottom-exit;
+  animation-name: popup-slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
 @keyframes popup-slide-left-enter {
@@ -323,17 +332,20 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
-  transform: translate(0, 0);
+  transform: translate3d(0, 0, 0);
   animation-fill-mode: both;
   animation-name: popup-slide-left-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-left-exit-active, .nut-popup-slide-left-exit-done {
+.nut-popup-slide-left-exit-active {
   animation-fill-mode: both;
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);