@nutui/nutui-react-taro 3.0.19-cpp.26-beta.3 → 3.0.19-cpp.26-beta.5

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

@@ -291,7 +291,7 @@
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-right-exit-active {
+.nut-popup-slide-right-exit {
   animation-fill-mode: both;
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -304,7 +304,7 @@
     transform: translate3d(0, 0%, 0);
   }
 }
-@keyframes popup-slide-bottom-exit {
+@keyframes slide-bottom-exit {
   from {
     transform: translate3d(0, 0%, 0);
   }
@@ -313,14 +313,14 @@
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active {
+.nut-popup-slide-bottom-exit {
   animation-fill-mode: both;
-  animation-name: popup-slide-bottom-exit;
+  animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
 @keyframes popup-slide-left-enter {
@@ -340,12 +340,12 @@
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active, .nut-popup-slide-left-exit-done {
   animation-fill-mode: both;
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);

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

@@ -128,7 +128,7 @@
     .nut-button {
       min-width: $dialog-footer-button-min-width;
       border-radius: $dialog-footer-button-border;
-      padding: var(--nutui-button-large-padding, 0 12px);
+      padding: var(--nutui-button-large-padding, 0);
     }
 
     &-cancel.nut-dialog-footer-cancel {

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

@@ -120,7 +120,7 @@
 .nut-dialog-footer .nut-button {
   min-width: var(--nutui-dialog-footer-button-min-width, 117px);
   border-radius: var(--nutui-dialog-footer-button-border, 6px);
-  padding: var(--nutui-button-large-padding, 0 12px);
+  padding: var(--nutui-button-large-padding, 0);
 }
 .nut-dialog-footer-cancel.nut-dialog-footer-cancel {
   margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12px);

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

@@ -554,7 +554,7 @@
 .nut-dialog-footer .nut-button {
   min-width: var(--nutui-dialog-footer-button-min-width, 117px);
   border-radius: var(--nutui-dialog-footer-button-border, 6px);
-  padding: var(--nutui-button-large-padding, 0 12px);
+  padding: var(--nutui-button-large-padding, 0);
 }
 .nut-dialog-footer-cancel.nut-dialog-footer-cancel {
   margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12px);

package/dist/es/packages/dialog/style-jmapp/dialog.scss

@@ -128,7 +128,7 @@
     .nut-button {
       min-width: $dialog-footer-button-min-width;
       border-radius: $dialog-footer-button-border;
-      padding: var(--nutui-button-large-padding, 0 12px);
+      padding: var(--nutui-button-large-padding, 0);
     }
 
     &-cancel.nut-dialog-footer-cancel {

package/dist/es/packages/dialog/style-jmapp/style.css

@@ -120,7 +120,7 @@
 .nut-dialog-footer .nut-button {
   min-width: var(--nutui-dialog-footer-button-min-width, 117px);
   border-radius: var(--nutui-dialog-footer-button-border, 6px);
-  padding: var(--nutui-button-large-padding, 0 12px);
+  padding: var(--nutui-button-large-padding, 0);
 }
 .nut-dialog-footer-cancel.nut-dialog-footer-cancel {
   margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12px);

package/dist/es/packages/dialog/style-jrkf/dialog.scss

@@ -128,7 +128,7 @@
     .nut-button {
       min-width: $dialog-footer-button-min-width;
       border-radius: $dialog-footer-button-border;
-      padding: var(--nutui-button-large-padding, 0 12px);
+      padding: var(--nutui-button-large-padding, 0);
     }
 
     &-cancel.nut-dialog-footer-cancel {

package/dist/es/packages/dialog/style-jrkf/style.css

@@ -120,7 +120,7 @@
 .nut-dialog-footer .nut-button {
   min-width: var(--nutui-dialog-footer-button-min-width, 117px);
   border-radius: var(--nutui-dialog-footer-button-border, 6px);
-  padding: var(--nutui-button-large-padding, 0 12px);
+  padding: var(--nutui-button-large-padding, 0);
 }
 .nut-dialog-footer-cancel.nut-dialog-footer-cancel {
   margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12px);

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

@@ -291,7 +291,7 @@
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-right-exit-active {
+.nut-popup-slide-right-exit {
   animation-fill-mode: both;
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -304,7 +304,7 @@
     transform: translate3d(0, 0%, 0);
   }
 }
-@keyframes popup-slide-bottom-exit {
+@keyframes slide-bottom-exit {
   from {
     transform: translate3d(0, 0%, 0);
   }
@@ -313,14 +313,14 @@
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active {
+.nut-popup-slide-bottom-exit {
   animation-fill-mode: both;
-  animation-name: popup-slide-bottom-exit;
+  animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
 @keyframes popup-slide-left-enter {
@@ -340,12 +340,12 @@
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active, .nut-popup-slide-left-exit-done {
   animation-fill-mode: both;
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);

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

@@ -291,7 +291,7 @@
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-right-exit-active {
+.nut-popup-slide-right-exit {
   animation-fill-mode: both;
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -304,7 +304,7 @@
     transform: translate3d(0, 0%, 0);
   }
 }
-@keyframes popup-slide-bottom-exit {
+@keyframes slide-bottom-exit {
   from {
     transform: translate3d(0, 0%, 0);
   }
@@ -313,14 +313,14 @@
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active {
+.nut-popup-slide-bottom-exit {
   animation-fill-mode: both;
-  animation-name: popup-slide-bottom-exit;
+  animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
 @keyframes popup-slide-left-enter {
@@ -340,12 +340,12 @@
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active, .nut-popup-slide-left-exit-done {
   animation-fill-mode: both;
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);

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

@@ -291,7 +291,7 @@
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-right-exit-active {
+.nut-popup-slide-right-exit {
   animation-fill-mode: both;
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -304,7 +304,7 @@
     transform: translate3d(0, 0%, 0);
   }
 }
-@keyframes popup-slide-bottom-exit {
+@keyframes slide-bottom-exit {
   from {
     transform: translate3d(0, 0%, 0);
   }
@@ -313,14 +313,14 @@
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active {
+.nut-popup-slide-bottom-exit {
   animation-fill-mode: both;
-  animation-name: popup-slide-bottom-exit;
+  animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
 @keyframes popup-slide-left-enter {
@@ -340,12 +340,12 @@
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active, .nut-popup-slide-left-exit-done {
   animation-fill-mode: both;
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);

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

@@ -291,7 +291,7 @@
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-right-exit-active {
+.nut-popup-slide-right-exit {
   animation-fill-mode: both;
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -304,7 +304,7 @@
     transform: translate3d(0, 0%, 0);
   }
 }
-@keyframes popup-slide-bottom-exit {
+@keyframes slide-bottom-exit {
   from {
     transform: translate3d(0, 0%, 0);
   }
@@ -313,14 +313,14 @@
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active {
+.nut-popup-slide-bottom-exit {
   animation-fill-mode: both;
-  animation-name: popup-slide-bottom-exit;
+  animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
 @keyframes popup-slide-left-enter {
@@ -340,12 +340,12 @@
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active, .nut-popup-slide-left-exit-done {
   animation-fill-mode: both;
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);

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

@@ -209,7 +209,10 @@ export var Popup = function(props) {
             onClick: handleCloseIconClick,
             ariaRole: "button",
             ariaLabel: closeAriaLabel || locale.close
-        }, /*#__PURE__*/ React.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ React.createElement(Close, null));
+        }, /*#__PURE__*/ React.isValidElement(closeIcon) ? closeIcon : // @ts-ignore
+        /*#__PURE__*/ React.createElement(Close, {
+            ariaHidden: true
+        }));
     }, [
         closeable,
         closeIconPosition,

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

@@ -268,7 +268,7 @@
       animation-duration: $popup-animation-duration;
     }
 
-    &-right-exit-active {
+    &-right-exit {
       animation-fill-mode: both;
       animation-name: popup-slide-right-exit;
       animation-duration: $popup-animation-duration;
@@ -284,7 +284,7 @@
       }
     }
 
-    @keyframes popup-slide-bottom-exit {
+    @keyframes slide-bottom-exit {
       from {
         transform: translate3d(0, 0%, 0);
       }
@@ -295,15 +295,15 @@
 
     &-bottom-enter-active,
     &-bottom-appear-active {
-      transform: translate3d(0, 0, 0);
+      transform: translate(0, 0);
       animation-fill-mode: both;
       animation-name: popup-slide-bottom-enter;
       animation-duration: $popup-animation-duration;
     }
 
-    &-bottom-exit-active {
+    &-bottom-exit {
       animation-fill-mode: both;
-      animation-name: popup-slide-bottom-exit;
+      animation-name: slide-bottom-exit;
       animation-duration: $popup-animation-duration;
     }
 
@@ -328,13 +328,14 @@
 
     &-left-enter-active,
     &-left-appear-active {
-      transform: translate3d(0, 0, 0);
+      transform: translate(0, 0);
       animation-fill-mode: both;
       animation-name: popup-slide-left-enter;
       animation-duration: $popup-animation-duration;
     }
 
-    &-left-exit-active {
+    &-left-exit-active,
+    &-left-exit-done {
       animation-fill-mode: both;
       animation-name: popup-slide-left-exit;
       animation-duration: $popup-animation-duration;

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

@@ -237,7 +237,7 @@
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-right-exit-active {
+.nut-popup-slide-right-exit {
   animation-fill-mode: both;
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -250,7 +250,7 @@
     transform: translate3d(0, 0%, 0);
   }
 }
-@keyframes popup-slide-bottom-exit {
+@keyframes slide-bottom-exit {
   from {
     transform: translate3d(0, 0%, 0);
   }
@@ -259,14 +259,14 @@
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active {
+.nut-popup-slide-bottom-exit {
   animation-fill-mode: both;
-  animation-name: popup-slide-bottom-exit;
+  animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
 @keyframes popup-slide-left-enter {
@@ -286,12 +286,12 @@
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active, .nut-popup-slide-left-exit-done {
   animation-fill-mode: both;
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);

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

@@ -291,7 +291,7 @@
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-right-exit-active {
+.nut-popup-slide-right-exit {
   animation-fill-mode: both;
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -304,7 +304,7 @@
     transform: translate3d(0, 0%, 0);
   }
 }
-@keyframes popup-slide-bottom-exit {
+@keyframes slide-bottom-exit {
   from {
     transform: translate3d(0, 0%, 0);
   }
@@ -313,14 +313,14 @@
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active {
+.nut-popup-slide-bottom-exit {
   animation-fill-mode: both;
-  animation-name: popup-slide-bottom-exit;
+  animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
 @keyframes popup-slide-left-enter {
@@ -340,12 +340,12 @@
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active, .nut-popup-slide-left-exit-done {
   animation-fill-mode: both;
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);

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

@@ -268,7 +268,7 @@
       animation-duration: $popup-animation-duration;
     }
 
-    &-right-exit-active {
+    &-right-exit {
       animation-fill-mode: both;
       animation-name: popup-slide-right-exit;
       animation-duration: $popup-animation-duration;
@@ -284,7 +284,7 @@
       }
     }
 
-    @keyframes popup-slide-bottom-exit {
+    @keyframes slide-bottom-exit {
       from {
         transform: translate3d(0, 0%, 0);
       }
@@ -295,15 +295,15 @@
 
     &-bottom-enter-active,
     &-bottom-appear-active {
-      transform: translate3d(0, 0, 0);
+      transform: translate(0, 0);
       animation-fill-mode: both;
       animation-name: popup-slide-bottom-enter;
       animation-duration: $popup-animation-duration;
     }
 
-    &-bottom-exit-active {
+    &-bottom-exit {
       animation-fill-mode: both;
-      animation-name: popup-slide-bottom-exit;
+      animation-name: slide-bottom-exit;
       animation-duration: $popup-animation-duration;
     }
 
@@ -328,13 +328,14 @@
 
     &-left-enter-active,
     &-left-appear-active {
-      transform: translate3d(0, 0, 0);
+      transform: translate(0, 0);
       animation-fill-mode: both;
       animation-name: popup-slide-left-enter;
       animation-duration: $popup-animation-duration;
     }
 
-    &-left-exit-active {
+    &-left-exit-active,
+    &-left-exit-done {
       animation-fill-mode: both;
       animation-name: popup-slide-left-exit;
       animation-duration: $popup-animation-duration;

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

@@ -237,7 +237,7 @@
   animation-name: popup-slide-right-enter;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-right-exit-active {
+.nut-popup-slide-right-exit {
   animation-fill-mode: both;
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -250,7 +250,7 @@
     transform: translate3d(0, 0%, 0);
   }
 }
-@keyframes popup-slide-bottom-exit {
+@keyframes slide-bottom-exit {
   from {
     transform: translate3d(0, 0%, 0);
   }
@@ -259,14 +259,14 @@
   }
 }
 .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active {
+.nut-popup-slide-bottom-exit {
   animation-fill-mode: both;
-  animation-name: popup-slide-bottom-exit;
+  animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
 @keyframes popup-slide-left-enter {
@@ -286,12 +286,12 @@
   }
 }
 .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
-  transform: translate3d(0, 0, 0);
+  transform: translate(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-active, .nut-popup-slide-left-exit-done {
   animation-fill-mode: both;
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);

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

@@ -268,7 +268,7 @@
       animation-duration: $popup-animation-duration;
     }
 
-    &-right-exit-active {
+    &-right-exit {
       animation-fill-mode: both;
       animation-name: popup-slide-right-exit;
       animation-duration: $popup-animation-duration;
@@ -284,7 +284,7 @@
       }
     }
 
-    @keyframes popup-slide-bottom-exit {
+    @keyframes slide-bottom-exit {
       from {
         transform: translate3d(0, 0%, 0);
       }
@@ -295,15 +295,15 @@
 
     &-bottom-enter-active,
     &-bottom-appear-active {
-      transform: translate3d(0, 0, 0);
+      transform: translate(0, 0);
       animation-fill-mode: both;
       animation-name: popup-slide-bottom-enter;
       animation-duration: $popup-animation-duration;
     }
 
-    &-bottom-exit-active {
+    &-bottom-exit {
       animation-fill-mode: both;
-      animation-name: popup-slide-bottom-exit;
+      animation-name: slide-bottom-exit;
       animation-duration: $popup-animation-duration;
     }
 
@@ -328,13 +328,14 @@
 
     &-left-enter-active,
     &-left-appear-active {
-      transform: translate3d(0, 0, 0);
+      transform: translate(0, 0);
       animation-fill-mode: both;
       animation-name: popup-slide-left-enter;
       animation-duration: $popup-animation-duration;
     }
 
-    &-left-exit-active {
+    &-left-exit-active,
+    &-left-exit-done {
       animation-fill-mode: both;
       animation-name: popup-slide-left-exit;
       animation-duration: $popup-animation-duration;