@nutui/nutui-react-taro 3.0.20-beta.0 → 3.0.21-cpp

package/dist/es/packages/popup/popup.js

@@ -4,13 +4,13 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { nextTick } from "@tarojs/taro";
 import { createPortal } from "react-dom";
-import { CSSTransition } from "react-transition-group";
 import classNames from "classnames";
 import { Close } from "@nutui/icons-react-taro";
 import { View } from "@tarojs/components";
+import ConfigurableCSSTransition from "../../utils/taro/ConfigurableCSSTransition";
 import { getRectInMultiPlatformWithoutCache } from "../../utils/taro/get-rect";
 import { defaultOverlayProps } from "../overlay/overlay";
 import Overlay from "../overlay/index";
@@ -42,61 +42,72 @@ var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps),
     },
     onTouchStart: function() {},
     onTouchMove: function() {},
-    onTouchEnd: function() {}
+    onTouchEnd: function() {},
+    overlayProps: {},
+    animated: true
 });
 // 默认1000，参看variables
 var _zIndex = 1100;
 export var Popup = function(props) {
-    var _$_object_spread = _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 = _sliced_to_array(useState(innerIndex), 2), index = _useState[0], setIndex = _useState[1];
+    var _$_object_spread = _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, overlayProps = _$_object_spread.overlayProps, animated = _$_object_spread.animated;
+    var locale = useConfig().locale;
+    var transitionDuration = useMemo(function() {
+        return animated ? Number(duration) : 0;
+    }, [
+        animated,
+        duration
+    ]);
+    var _useState = _sliced_to_array(useState(zIndex || _zIndex), 2), index = _useState[0], setIndex = _useState[1];
     var _useState1 = _sliced_to_array(useState(visible), 2), innerVisible = _useState1[0], setInnerVisible = _useState1[1];
     var _useState2 = _sliced_to_array(useState(true), 2), showChildren = _useState2[0], setShowChildren = _useState2[1];
-    var _useState3 = _sliced_to_array(useState(''), 2), transitionName = _useState3[0], setTransitionName = _useState3[1];
     var nodeRef = useLockScrollTaro(innerVisible && lockScroll);
-    var topNodeRef = React.useRef(null);
+    var topNodeRef = useRef(null);
     var rootRect = useRef(null);
     var touchStartRef = useRef(0);
     var touchMoveDistanceRef = useRef(0);
     var heightRef = useRef(0);
     var defaultHeightRef = useRef(0);
     var isTouching = useRef(false);
-    var locale = useConfig().locale;
     var classPrefix = 'nut-popup';
-    var overlayStyles = _object_spread({}, overlayStyle);
-    var contentZIndex = harmony() ? index + 1 : index // 解决harmony层级问题
-    ;
-    var popStyles = _object_spread({
-        zIndex: contentZIndex,
-        minHeight: minHeight
-    }, style);
-    var _obj;
-    var popClassName = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), _define_property(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
-    var _useState4 = _sliced_to_array(useState(''), 2), popupHeight = _useState4[0], setPopupHeight = _useState4[1];
-    var _useState5 = _sliced_to_array(useState(''), 2), topBottom = _useState5[0], setTopBottom = _useState5[1];
-    var resizeStyles = function() {
-        if (popupHeight !== '') {
-            return {
-                height: popupHeight
-            };
-        }
-    };
-    var open = function() {
-        if (!innerVisible) {
-            // 当高度改变后，再次打开时，将高度置为初始高度
-            if (position === 'bottom' && resizable && nodeRef.current && heightRef.current) {
-                setPopupHeight(pxTransform(defaultHeightRef.current));
-            }
-            setInnerVisible(true);
-            setIndex(++innerIndex);
-        }
-        if (destroyOnClose) {
-            setShowChildren(true);
-        }
-        onOpen && onOpen();
-    };
-    var getPopupHeight = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function() {
+    var transitionName = useMemo(function() {
+        return transition || "".concat(classPrefix, "-slide-").concat(position);
+    }, [
+        transition,
+        position
+    ]);
+    var overlayStyles = useMemo(function() {
+        return _object_spread({}, overlayStyle);
+    }, [
+        overlayStyle
+    ]);
+    var contentZIndex = useMemo(function() {
+        return harmony() ? index + 1 : index // 解决harmony层级问题
+        ;
+    }, [
+        index
+    ]);
+    var popStyles = useMemo(function() {
+        return _object_spread({
+            zIndex: contentZIndex,
+            minHeight: minHeight
+        }, style);
+    }, [
+        contentZIndex,
+        minHeight,
+        style
+    ]);
+    var popClassName = useMemo(function() {
+        var _obj;
+        return classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), _define_property(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
+    }, [
+        round,
+        position,
+        className
+    ]);
+    var _useState3 = _sliced_to_array(useState(''), 2), popupHeight = _useState3[0], setPopupHeight = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(''), 2), topBottom = _useState4[0], setTopBottom = _useState4[1];
+    var getPopupHeight = useCallback(function() {
+        return _async_to_generator(function() {
             var _nodeRef_current, rect, height;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -114,52 +125,110 @@ export var Popup = function(props) {
                         ];
                 }
             });
-        });
-        return function getPopupHeight() {
-            return _ref.apply(this, arguments);
-        };
-    }();
-    useEffect(function() {
-        if (innerVisible && topNodeRef.current && nodeRef.current) {
-            nextTick(function() {
-                nextTick(function() {
-                    getPopupHeight();
-                });
+        })();
+    }, [
+        nodeRef
+    ]);
+    var open = useCallback(function() {
+        if (!innerVisible) {
+            // 当高度改变后，再次打开时，将高度置为初始高度
+            if (position === 'bottom' && resizable && nodeRef.current && heightRef.current) {
+                setPopupHeight(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() {
+    var close = useCallback(function() {
         if (innerVisible) {
             setInnerVisible(false);
             if (destroyOnClose) {
                 setTimeout(function() {
                     setShowChildren(false);
-                }, Number(duration));
+                }, transitionDuration);
             }
-            onClose && onClose();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         }
-    };
-    var handleOverlayClick = function(e) {
+    }, [
+        innerVisible,
+        destroyOnClose,
+        transitionDuration,
+        onClose,
+        setInnerVisible,
+        setShowChildren
+    ]);
+    useEffect(function() {
+        visible ? open() : close();
+    }, [
+        visible,
+        open,
+        close
+    ]);
+    useEffect(function() {
+        if (innerVisible && topNodeRef.current && nodeRef.current) {
+            nextTick(function() {
+                nextTick(function() {
+                    getPopupHeight();
+                });
+            });
+        }
+    }, [
+        innerVisible,
+        getPopupHeight,
+        nodeRef
+    ]);
+    var handleOverlayClick = useCallback(function(e) {
         e.stopPropagation();
         if (closeOnOverlayClick && onOverlayClick(e)) {
             close();
         }
-    };
-    var handleCloseIconClick = function(e) {
+    }, [
+        closeOnOverlayClick,
+        onOverlayClick,
+        close
+    ]);
+    var handleCloseIconClick = useCallback(function(e) {
         onCloseIconClick(e) && close();
-    };
-    var renderCloseIcon = function() {
+    }, [
+        onCloseIconClick,
+        close
+    ]);
+    var renderCloseIcon = useCallback(function() {
+        if (!closeable) return null;
         var closeClasses = classNames("".concat(classPrefix, "-title-right"), "".concat(classPrefix, "-title-right-").concat(closeIconPosition));
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, closeable && /*#__PURE__*/ React.createElement(View, {
+        return /*#__PURE__*/ React.createElement(View, {
             className: closeClasses,
             onClick: handleCloseIconClick,
             ariaRole: "button",
             ariaLabel: closeAriaLabel || locale.close
-        }, /*#__PURE__*/ React.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ React.createElement(Close, null)));
-    };
-    var renderTop = function() {
+        }, /*#__PURE__*/ React.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ React.createElement(Close, {
+            ariaHidden: true
+        }));
+    }, [
+        closeable,
+        closeIconPosition,
+        handleCloseIconClick,
+        closeAriaLabel,
+        locale.close,
+        closeIcon
+    ]);
+    var renderTop = useCallback(function() {
         if (!top) return null;
         return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-bottom-top"),
@@ -168,8 +237,11 @@ export var Popup = function(props) {
                 bottom: topBottom
             }
         }, top);
-    };
-    var renderTitle = function() {
+    }, [
+        top,
+        topBottom
+    ]);
+    var renderTitle = useCallback(function() {
         if (left || title || description) {
             return /*#__PURE__*/ React.createElement(View, {
                 className: "".concat(classPrefix, "-title")
@@ -186,9 +258,16 @@ export var Popup = function(props) {
         if (closeable) {
             return renderCloseIcon();
         }
-    };
-    var handleTouchStart = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function(event) {
+    }, [
+        left,
+        title,
+        description,
+        position,
+        closeable,
+        renderCloseIcon
+    ]);
+    var handleTouchStart = useCallback(function(event) {
+        return _async_to_generator(function() {
             var _nodeRef_current, _rootRect_current, e, rect;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -216,12 +295,14 @@ export var Popup = function(props) {
                         ];
                 }
             });
-        });
-        return function handleTouchStart(event) {
-            return _ref.apply(this, arguments);
-        };
-    }();
-    var handleTouchMove = function(event) {
+        })();
+    }, [
+        position,
+        resizable,
+        onTouchStart,
+        nodeRef
+    ]);
+    var handleTouchMove = useCallback(function(event) {
         if (position !== 'bottom' || !resizable || !nodeRef.current || !rootRect.current) return;
         var e = event;
         e.stopPropagation();
@@ -240,65 +321,63 @@ export var Popup = function(props) {
             }
         };
         requestAnimationFrame(handleMove);
-    };
-    var handleTouchEnd = function(event) {
+    }, [
+        position,
+        resizable,
+        minHeight,
+        onTouchMove,
+        nodeRef
+    ]);
+    var handleTouchEnd = 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);
-    };
-    var renderContent = function() {
-        return /*#__PURE__*/ React.createElement(View, {
-            ref: nodeRef,
-            style: _object_spread(_object_spread_props(_object_spread({}, popStyles), {
-                display: innerVisible ? (popStyles === null || popStyles === void 0 ? void 0 : popStyles.display) || 'block' : 'none'
-            }), resizeStyles()),
-            className: popClassName,
-            onClick: onClick,
-            catchMove: lockScroll,
-            onTouchStart: handleTouchStart,
-            onTouchMove: handleTouchMove,
-            onTouchEnd: handleTouchEnd,
-            onTouchCancel: handleTouchEnd
-        }, renderTop(), renderTitle(), showChildren ? children : null);
-    };
+    }, [
+        position,
+        resizable,
+        minHeight,
+        onTouchEnd,
+        nodeRef
+    ]);
     var renderPop = function() {
-        return /*#__PURE__*/ React.createElement(CSSTransition, {
+        return /*#__PURE__*/ React.createElement(ConfigurableCSSTransition, {
             nodeRef: nodeRef,
             classNames: transitionName,
             mountOnEnter: true,
             unmountOnExit: destroyOnClose,
-            timeout: duration,
+            timeout: Number(transitionDuration),
             in: innerVisible,
             onEntered: afterShow,
             onExited: afterClose
-        }, renderContent());
+        }, /*#__PURE__*/ React.createElement(View, {
+            ref: nodeRef,
+            style: _object_spread({}, popStyles, popupHeight ? {
+                height: popupHeight
+            } : {}),
+            className: popClassName,
+            onClick: onClick,
+            catchMove: lockScroll,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            onTouchCancel: handleTouchEnd
+        }, renderTop(), renderTitle(), showChildren ? children : null));
     };
     var renderNode = function() {
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, overlay ? /*#__PURE__*/ React.createElement(Overlay, {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, overlay ? /*#__PURE__*/ React.createElement(Overlay, _object_spread({
             zIndex: index,
             style: overlayStyles,
             className: overlayClassName,
             visible: innerVisible,
             closeOnOverlayClick: closeOnOverlayClick,
             lockScroll: lockScroll,
-            duration: duration,
+            duration: transitionDuration,
             onClick: handleOverlayClick
-        }) : null, renderPop());
+        }, overlayProps)) : null, renderPop());
     };
-    useEffect(function() {
-        visible ? open() : close();
-    }, [
-        visible
-    ]);
-    useEffect(function() {
-        setTransitionName(transition || "".concat(classPrefix, "-slide-").concat(position));
-    }, [
-        position,
-        transition
-    ]);
     var resolveContainer = function(getContainer) {
         return (typeof getContainer === 'function' ? getContainer() : getContainer) || document.body;
     };

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

@@ -26,7 +26,6 @@
       color: $color-title;
       font-weight: $font-weight-bold;
       font-size: $popup-title-font-size;
-      line-height: $popup-title-font-size;
     }
 
     &-description {
@@ -79,6 +78,8 @@
   &-center {
     top: 50%;
     left: 50%;
+    right: auto;
+    bottom: auto;
     min-height: 10%;
     max-width: 295px;
     transform: translate(-50%, -50%);
@@ -91,6 +92,8 @@
   &-bottom {
     bottom: 0;
     left: 0;
+    right: auto;
+    top: auto;
     width: 100%;
 
     &.nut-popup-round {
@@ -105,6 +108,8 @@
   &-right {
     top: 0;
     right: 0;
+    left: auto;
+    bottom: auto;
     width: 100px;
     height: 100%;
 
@@ -116,6 +121,8 @@
   &-left {
     top: 0;
     left: 0;
+    right: auto;
+    bottom: auto;
     width: 100px;
     height: 100%;
 
@@ -127,6 +134,8 @@
   &-top {
     top: 0;
     left: 0;
+    right: auto;
+    bottom: auto;
     width: 100%;
 
     &.nut-popup-round {
@@ -210,6 +219,9 @@
     }
 
     @keyframes popup-slide-top-exit {
+      from {
+        transform: translate3d(0, 0%, 0);
+      }
       to {
         transform: translate3d(0, -100%, 0);
       }
@@ -240,6 +252,9 @@
     }
 
     @keyframes popup-slide-right-exit {
+      from {
+        transform: translate3d(0%, 0, 0);
+      }
       to {
         transform: translate3d(100%, 0, 0);
       }
@@ -270,6 +285,9 @@
     }
 
     @keyframes slide-bottom-exit {
+      from {
+        transform: translate3d(0, 0%, 0);
+      }
       to {
         transform: translate3d(0, 100%, 0);
       }
@@ -300,6 +318,9 @@
     }
 
     @keyframes popup-slide-left-exit {
+      from {
+        transform: translate3d(0%, 0, 0);
+      }
       to {
         transform: translate3d(-100%, 0, 0);
       }

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

@@ -17,7 +17,7 @@
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
-  padding: var(--nutui-popup-title-padding, 16px);
+  padding: var(--nutui-popup-title-padding, 11px);
   position: relative;
 }
 .nut-popup-title-wrapper {
@@ -30,7 +30,6 @@
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -42,13 +41,13 @@
 }
 .nut-popup-title-left {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  right: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, 11px);
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
@@ -59,20 +58,22 @@
   opacity: 0.7;
 }
 .nut-popup-title-right-top-left {
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-left {
-  bottom: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  bottom: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-right {
-  right: var(--nutui-popup-title-padding, 16px);
-  bottom: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
+  bottom: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-center {
   top: 50%;
   left: 50%;
+  right: auto;
+  bottom: auto;
   min-height: 10%;
   max-width: 295px;
   transform: translate(-50%, -50%);
@@ -83,6 +84,8 @@
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
+  right: auto;
+  top: auto;
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
@@ -94,6 +97,8 @@
 .nut-popup-right {
   top: 0;
   right: 0;
+  left: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -103,6 +108,8 @@
 .nut-popup-left {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -112,6 +119,8 @@
 .nut-popup-top {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
@@ -188,6 +197,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -212,6 +224,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -236,6 +251,9 @@
   }
 }
 @keyframes slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
@@ -260,6 +278,9 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }
@@ -285,27 +306,27 @@
 [dir=rtl] .nut-popup-title-left,
 .nut-rtl .nut-popup-title-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right,
 .nut-rtl .nut-popup-title-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-top-left,
 .nut-rtl .nut-popup-title-right-top-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-left,
 .nut-rtl .nut-popup-title-right-bottom-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-right,
 .nut-rtl .nut-popup-title-right-bottom-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
 .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {