@nutui/nutui-react-taro 3.0.0 → 3.0.2

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

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/es/packages/input/input.js

@@ -27,6 +27,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     plain: false
 });
 export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
+    var classPrefix = 'nut-input';
     var rtl = useRtl();
     var locale = useConfig().locale;
     var _ref = _object_spread({}, defaultProps, props), type = _ref.type, name = _ref.name, placeholder = _ref.placeholder, align = _ref.align, disabled = _ref.disabled, readOnly = _ref.readOnly, maxLength = _ref.maxLength, clearable = _ref.clearable, clearIcon = _ref.clearIcon, formatTrigger = _ref.formatTrigger, autoFocus = _ref.autoFocus, style = _ref.style, className = _ref.className, plain = _ref.plain, onChange = _ref.onChange, onFocus = _ref.onFocus, onBlur = _ref.onBlur, onClear = _ref.onClear, formatter = _ref.formatter, onClick = _ref.onClick, confirmType = _ref.confirmType, defaultValue = _ref.defaultValue, _value = _ref.value, rest = _object_without_properties(_ref, [
@@ -81,7 +82,6 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
         };
     });
     var inputClass = useCallback(function() {
-        var classPrefix = 'nut-input';
         return [
             classPrefix,
             "".concat(disabled ? "".concat(classPrefix, "-disabled") : ''),
@@ -154,11 +154,14 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
         name: name,
         className: "nut-input-native",
         ref: inputRef,
-        style: getTextAlign(),
+        style: {
+            textAlign: getTextAlign()
+        },
         type: inputType(type),
         password: type === 'password',
         maxlength: maxLength,
         placeholder: placeholder === undefined ? locale.placeholder : placeholder,
+        placeholderClass: "".concat(classPrefix, "-placeholder"),
         disabled: disabled || readOnly,
         value: value,
         focus: autoFocus,

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

@@ -8,6 +8,12 @@
   font-size: $input-font-size;
   box-sizing: border-box;
 
+  .nut-input-native .weui-input::placeholder,
+  &-placeholder {
+    color: rgb(117, 117, 117);
+    font-size: $input-font-size;
+  }
+
   .nut-icon {
     color: $color-text-disabled;
     width: 14px;
@@ -52,7 +58,3 @@
     -webkit-text-fill-color: $color-text-disabled;
   }
 }
-
-.nut-input-clear {
-  // flex: 0;
-}

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

@@ -12,6 +12,10 @@
   font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
 }
+.nut-input .nut-input-native .weui-input::placeholder, .nut-input-placeholder {
+  color: rgb(117, 117, 117);
+  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
+}
 .nut-input .nut-icon {
   color: var(--nutui-color-text-disabled, #c2c4cc);
   width: 14px;

package/dist/es/packages/input/style/style.harmony.css

@@ -12,6 +12,14 @@
   font-size: 14px;
   box-sizing: border-box;
 }
+.nut-input .nut-input-native .weui-input::placeholder {
+  color: rgb(117, 117, 117);
+  font-size: 14px;
+}
+.nut-input-placeholder {
+  color: rgb(117, 117, 117);
+  font-size: 14px;
+}
 .nut-input .nut-icon {
   color: #c2c4cc;
   width: 14px;

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

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/es/packages/nutui.react.build.d.ts

@@ -22,12 +22,12 @@ import Col from "./col/index";
 export * from "./col/index";
 import Row from "./row/index";
 export * from "./row/index";
+import SafeArea from "./safearea/index";
+export * from "./safearea/index";
 import Space from "./space/index";
 export * from "./space/index";
 import Sticky from "./sticky/index";
 export * from "./sticky/index";
-import SafeArea from "./safearea/index";
-export * from "./safearea/index";
 import BackTop from "./backtop/index";
 export * from "./backtop/index";
 import Elevator from "./elevator/index";
@@ -40,16 +40,10 @@ import HoverButtonItem from "./hoverbuttonitem/index";
 export * from "./hoverbuttonitem/index";
 import NavBar from "./navbar/index";
 export * from "./navbar/index";
-import SideNavBar from "./sidenavbar/index";
-export * from "./sidenavbar/index";
 import SideBar from "./sidebar/index";
 export * from "./sidebar/index";
 import SideBarItem from "./sidebaritem/index";
 export * from "./sidebaritem/index";
-import SideNavBarItem from "./sidenavbaritem/index";
-export * from "./sidenavbaritem/index";
-import SubSideNavBar from "./subsidenavbar/index";
-export * from "./subsidenavbar/index";
 import Tabbar from "./tabbar/index";
 export * from "./tabbar/index";
 import TabbarItem from "./tabbaritem/index";
@@ -74,6 +68,8 @@ import CheckboxGroup from "./checkboxgroup/index";
 export * from "./checkboxgroup/index";
 import DatePicker from "./datepicker/index";
 export * from "./datepicker/index";
+import DatePickerView from "./datepickerview/index";
+export * from "./datepickerview/index";
 import Form from "./form/index";
 export * from "./form/index";
 import FormItem from "./formitem/index";
@@ -122,8 +118,6 @@ import Drag from "./drag/index";
 export * from "./drag/index";
 import Empty from "./empty/index";
 export * from "./empty/index";
-import ResultPage from "./resultpage/index";
-export * from "./resultpage/index";
 import InfiniteLoading from "./infiniteloading/index";
 export * from "./infiniteloading/index";
 import Loading from "./loading/index";
@@ -138,6 +132,8 @@ import Popup from "./popup/index";
 export * from "./popup/index";
 import PullToRefresh from "./pulltorefresh/index";
 export * from "./pulltorefresh/index";
+import ResultPage from "./resultpage/index";
+export * from "./resultpage/index";
 import Skeleton from "./skeleton/index";
 export * from "./skeleton/index";
 import Swipe from "./swipe/index";
@@ -172,12 +168,12 @@ import Lottie from "./lottie/index";
 export * from "./lottie/index";
 import Pagination from "./pagination/index";
 export * from "./pagination/index";
-import Segmented from "./segmented/index";
-export * from "./segmented/index";
 import Price from "./price/index";
 export * from "./price/index";
 import Progress from "./progress/index";
 export * from "./progress/index";
+import Segmented from "./segmented/index";
+export * from "./segmented/index";
 import Step from "./step/index";
 export * from "./step/index";
 import Steps from "./steps/index";
@@ -196,6 +192,8 @@ import Video from "./video/index";
 export * from "./video/index";
 import VirtualList from "./virtuallist/index";
 export * from "./virtuallist/index";
+import AvatarCropper from "./avatarcropper/index";
+export * from "./avatarcropper/index";
 import Barrage from "./barrage/index";
 export * from "./barrage/index";
 import Card from "./card/index";
@@ -208,6 +206,4 @@ import TrendArrow from "./trendarrow/index";
 export * from "./trendarrow/index";
 import WaterMark from "./watermark/index";
 export * from "./watermark/index";
-import AvatarCropper from "./avatarcropper/index";
-export * from "./avatarcropper/index";
-export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Divider, Grid, GridItem, Layout, Col, Row, Space, Sticky, SafeArea, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideNavBar, SideBar, SideBarItem, SideNavBarItem, SubSideNavBar, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, PickerView, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, ResultPage, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Lottie, Pagination, Segmented, Price, Progress, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark, AvatarCropper };
+export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Divider, Grid, GridItem, Layout, Col, Row, SafeArea, Space, Sticky, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideBar, SideBarItem, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, DatePickerView, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, PickerView, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, ResultPage, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Lottie, Pagination, Price, Progress, Segmented, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, AvatarCropper, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark };

package/dist/es/packages/nutui.react.build.js

@@ -22,12 +22,12 @@ import Col from "./col/index";
 export * from "./col/index";
 import Row from "./row/index";
 export * from "./row/index";
+import SafeArea from "./safearea/index";
+export * from "./safearea/index";
 import Space from "./space/index";
 export * from "./space/index";
 import Sticky from "./sticky/index";
 export * from "./sticky/index";
-import SafeArea from "./safearea/index";
-export * from "./safearea/index";
 import BackTop from "./backtop/index";
 export * from "./backtop/index";
 import Elevator from "./elevator/index";
@@ -40,16 +40,10 @@ import HoverButtonItem from "./hoverbuttonitem/index";
 export * from "./hoverbuttonitem/index";
 import NavBar from "./navbar/index";
 export * from "./navbar/index";
-import SideNavBar from "./sidenavbar/index";
-export * from "./sidenavbar/index";
 import SideBar from "./sidebar/index";
 export * from "./sidebar/index";
 import SideBarItem from "./sidebaritem/index";
 export * from "./sidebaritem/index";
-import SideNavBarItem from "./sidenavbaritem/index";
-export * from "./sidenavbaritem/index";
-import SubSideNavBar from "./subsidenavbar/index";
-export * from "./subsidenavbar/index";
 import Tabbar from "./tabbar/index";
 export * from "./tabbar/index";
 import TabbarItem from "./tabbaritem/index";
@@ -74,6 +68,8 @@ import CheckboxGroup from "./checkboxgroup/index";
 export * from "./checkboxgroup/index";
 import DatePicker from "./datepicker/index";
 export * from "./datepicker/index";
+import DatePickerView from "./datepickerview/index";
+export * from "./datepickerview/index";
 import Form from "./form/index";
 export * from "./form/index";
 import FormItem from "./formitem/index";
@@ -122,8 +118,6 @@ import Drag from "./drag/index";
 export * from "./drag/index";
 import Empty from "./empty/index";
 export * from "./empty/index";
-import ResultPage from "./resultpage/index";
-export * from "./resultpage/index";
 import InfiniteLoading from "./infiniteloading/index";
 export * from "./infiniteloading/index";
 import Loading from "./loading/index";
@@ -138,6 +132,8 @@ import Popup from "./popup/index";
 export * from "./popup/index";
 import PullToRefresh from "./pulltorefresh/index";
 export * from "./pulltorefresh/index";
+import ResultPage from "./resultpage/index";
+export * from "./resultpage/index";
 import Skeleton from "./skeleton/index";
 export * from "./skeleton/index";
 import Swipe from "./swipe/index";
@@ -172,12 +168,12 @@ import Lottie from "./lottie/index";
 export * from "./lottie/index";
 import Pagination from "./pagination/index";
 export * from "./pagination/index";
-import Segmented from "./segmented/index";
-export * from "./segmented/index";
 import Price from "./price/index";
 export * from "./price/index";
 import Progress from "./progress/index";
 export * from "./progress/index";
+import Segmented from "./segmented/index";
+export * from "./segmented/index";
 import Step from "./step/index";
 export * from "./step/index";
 import Steps from "./steps/index";
@@ -196,6 +192,8 @@ import Video from "./video/index";
 export * from "./video/index";
 import VirtualList from "./virtuallist/index";
 export * from "./virtuallist/index";
+import AvatarCropper from "./avatarcropper/index";
+export * from "./avatarcropper/index";
 import Barrage from "./barrage/index";
 export * from "./barrage/index";
 import Card from "./card/index";
@@ -208,6 +206,4 @@ import TrendArrow from "./trendarrow/index";
 export * from "./trendarrow/index";
 import WaterMark from "./watermark/index";
 export * from "./watermark/index";
-import AvatarCropper from "./avatarcropper/index";
-export * from "./avatarcropper/index";
-export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Divider, Grid, GridItem, Layout, Col, Row, Space, Sticky, SafeArea, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideNavBar, SideBar, SideBarItem, SideNavBarItem, SubSideNavBar, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, PickerView, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, ResultPage, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Lottie, Pagination, Segmented, Price, Progress, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark, AvatarCropper };
+export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Divider, Grid, GridItem, Layout, Col, Row, SafeArea, Space, Sticky, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideBar, SideBarItem, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, DatePickerView, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, PickerView, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, ResultPage, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Lottie, Pagination, Price, Progress, Segmented, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, AvatarCropper, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark };

package/dist/es/packages/overlay/overlay.js

@@ -8,7 +8,6 @@ import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { useLockScrollTaro } from "../../hooks/use-lock-scoll-taro";
-import { harmony } from "../../utils/platform-taro";
 export var defaultOverlayProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     zIndex: 1000,
     duration: 300,
@@ -42,9 +41,9 @@ export var Overlay = function(props) {
         visible
     ]);
     var classes = classNames(classPrefix, className);
-    var styles = _object_spread_props(_object_spread({}, style), {
+    var styles = _object_spread({
         zIndex: zIndex
-    });
+    }, style);
     var handleClick = function(e) {
         if (closeOnOverlayClick) {
             onClick && onClick(e);
@@ -60,7 +59,7 @@ export var Overlay = function(props) {
             onClick: handleClick
         }), children);
     };
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, !harmony() ? /*#__PURE__*/ React.createElement(CSSTransition, {
+    return /*#__PURE__*/ React.createElement(CSSTransition, {
         nodeRef: nodeRef,
         classNames: "".concat(classPrefix, "-slide"),
         unmountOnExit: true,
@@ -68,6 +67,6 @@ export var Overlay = function(props) {
         in: innerVisible,
         onEntered: afterShow,
         onExited: afterClose
-    }, renderOverlay()) : innerVisible && renderOverlay());
+    }, renderOverlay());
 };
 Overlay.displayName = 'NutOverlay';

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

@@ -19,11 +19,9 @@
     0% {
       opacity: 0;
     }
-
     1% {
       opacity: 0;
     }
-
     100% {
       opacity: 1;
     }
@@ -33,11 +31,9 @@
     0% {
       opacity: 1;
     }
-
     1% {
       opacity: 1;
     }
-
     100% {
       opacity: 0;
     }

package/dist/es/packages/picker/style/index.js

@@ -1,2 +1,3 @@
 import '../../popup/style';
+import '../../pickerview/style';
 import './picker.scss';

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

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {
@@ -371,6 +383,76 @@
   right: 0;
 }
 
+.nut-pickerview {
+  --nutui-picker-item-height: 36px;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+}
+.nut-pickerview-mask, .nut-pickerview-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.nut-pickerview-mask {
+  top: 0;
+  bottom: 0;
+  background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
+  background-position: top, bottom;
+  background-size: 100% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.nut-pickerview-indicator {
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  height: var(--nutui-picker-item-height, 36px);
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+}
+.nut-pickerview-list {
+  position: relative;
+  flex: 1;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+  touch-action: none;
+}
+.nut-pickerview-roller {
+  position: absolute;
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+.nut-pickerview-roller-item {
+  position: absolute;
+  top: 0;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.nut-pickerview-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  line-height: var(--nutui-picker-item-height, 36px);
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .nut-picker {
   background-color: var(--nutui-color-background-overlay, #ffffff);
   width: 100%;

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

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

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

@@ -11,6 +11,7 @@ import { View } from "@tarojs/components";
 import { defaultOverlayProps } from "../overlay/overlay";
 import Overlay from "../overlay/index";
 import { useLockScrollTaro } from "../../hooks/use-lock-scoll-taro";
+import { harmony } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps), {
     position: 'center',
     transition: '',
@@ -44,9 +45,11 @@ export var Popup = function(props) {
     var refObject = useLockScrollTaro(innerVisible && lockScroll);
     var classPrefix = 'nut-popup';
     var overlayStyles = _object_spread({}, overlayStyle);
-    var popStyles = _object_spread_props(_object_spread({}, style), {
-        zIndex: index
-    });
+    var contentZIndex = harmony() ? index + 1 : index // 解决harmony层级问题
+    ;
+    var popStyles = _object_spread({
+        zIndex: contentZIndex
+    }, 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 open = function() {
@@ -104,6 +107,15 @@ export var Popup = function(props) {
             return renderCloseIcon();
         }
     };
+    var renderContent = function() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+            ref: refObject,
+            style: popStyles,
+            className: popClassName,
+            onClick: onClick,
+            catchMove: lockScroll
+        }, renderTitle(), showChildren ? children : null));
+    };
     var renderPop = function() {
         return /*#__PURE__*/ React.createElement(CSSTransition, {
             nodeRef: refObject,
@@ -114,13 +126,7 @@ export var Popup = function(props) {
             in: innerVisible,
             onEntered: afterShow,
             onExited: afterClose
-        }, /*#__PURE__*/ React.createElement(View, {
-            ref: refObject,
-            style: popStyles,
-            className: popClassName,
-            onClick: onClick,
-            catchMove: lockScroll
-        }, renderTitle(), showChildren ? children : null));
+        }, renderContent());
     };
     var renderNode = function() {
         return /*#__PURE__*/ React.createElement(React.Fragment, null, overlay ? /*#__PURE__*/ React.createElement(Overlay, {
@@ -132,7 +138,7 @@ export var Popup = function(props) {
             lockScroll: lockScroll,
             duration: duration,
             onClick: handleOverlayClick
-        }, renderPop()) : renderPop());
+        }) : null, renderPop());
     };
     useEffect(function() {
         visible ? open() : close();