fix: popup 动效优化 (#620)

src/packages/calendar/calendar.scss

 @import '../popup/popup.scss';
+
 .nut-theme-dark {
   .nut-calendar {
     background: $dark5;
     color: $dark1;
+
     .nut-calendar-header {
       background: $dark5;
       color: $dark1;
     }
+
     .nut-calendar-content {
       .calendar-months-panel {
         .calendar-month-con {
@@ -19,6 +22,7 @@
         }
       }
     }
+
     .nut-calendar-footer {
       background: $dark5;
       color: $dark1;
@@ -49,12 +53,15 @@
   .nut-calendar-taro {
     height: 60vh;
   }
+
   .popup-box {
     height: 100%;
   }
+
   .nut-calendar-content {
     overflow-y: auto;
   }
+
   ::-webkit-scrollbar {
     display: none;
   }
@@ -78,6 +85,7 @@
       line-height: 22px;
       font-size: $calendar-sub-title-font;
     }
+
     .calendar-top-slot {
       height: $calendar-top-slot-height;
     }
@@ -104,15 +112,18 @@
     flex: 1;
     width: 100%;
     display: block;
+
     .calendar-months-panel {
       position: relative;
       width: 100%;
       height: auto;
       display: block;
       box-sizing: border-box;
+
       .viewArea {
         display: block;
       }
+
       .calendar-month {
         display: flex;
         flex-direction: column;
@@ -145,6 +156,7 @@
 
       .calendar-month-con {
         overflow: hidden;
+
         .calendar-month-item {
           .calendar-month-day:nth-child(7n + 0),
           .calendar-month-day:nth-child(7n + 1) {
@@ -175,6 +187,7 @@
             font-size: 12px;
             line-height: 14px;
           }
+
           .calendar-day-tip {
             position: absolute;
             bottom: 6px;
@@ -183,9 +196,11 @@
             line-height: 14px;
             color: $calendar-primary-color;
           }
+
           .calendar-curr-tips-top {
             top: 6px;
           }
+
           .calendar-curr-tips-bottom {
             bottom: 6px;
           }
@@ -198,9 +213,11 @@
             .calendar-curr-tips {
               visibility: hidden;
             }
+
             .calendar-curr-tip-curr {
               visibility: hidden;
             }
+
             .calendar-day-tip {
               color: $white;
             }
@@ -243,6 +260,7 @@
     }
   }
 }
-.nutui-popup__close-icon {
+
+.nut-popup__close-icon {
   top: 7px !important;
 }

src/packages/notify/Notification.tsx

@@ -101,8 +101,8 @@ export default class Notification extends React.PureComponent<
     const notifyBem = bem('notify')
 
     const classes = classNames({
-      'popup-top': position === 'top',
-      'popup-bottom': position === 'bottom',
+      'nut-notify--popup-top': position === 'top',
+      'nut-notify--popup-bottom': position === 'bottom',
       'nut-notify': true,
       [`nut-notify--${type}`]: true,
     })

src/packages/notify/notify.scss

-.popup-top {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  overflow-y: auto;
-  transition: transform 0.3s;
-  z-index: 9999;
-}
-.popup-bottom {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  overflow-y: auto;
-  transition: transform 0.3s;
-  z-index: 9999;
-}
-
 /*入场动画开始*/
 .fade-enter {
   opacity: 0;
@@ -59,6 +40,7 @@
   opacity: 1;
   transition: opacity 1s;
 }
+
 .nut-notify {
   box-sizing: border-box;
   padding: $notify-padding;
@@ -68,9 +50,31 @@
   text-align: center;
   word-wrap: break-word;
   height: $notify-height;
+
+  &--popup-top {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    overflow-y: auto;
+    transition: transform 0.3s;
+    z-index: 9999;
+  }
+
+  &--popup-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    overflow-y: auto;
+    transition: transform 0.3s;
+    z-index: 9999;
+  }
+
   &--base {
     background: $notify-base-background-color;
   }
+
   &--primary {
     background: $notify-primary-background-color;
   }

src/packages/popup/__tests__/popup.spec.tsx

@@ -130,7 +130,7 @@ test('should render close icon when using closeable prop', () => {
     </>
   )
   const closeIcon = container.querySelector(
-    '.nutui-popup__close-icon'
+    '.nut-popup__close-icon'
   ) as HTMLElement
   expect(closeIcon).toBeTruthy()
 })
@@ -143,7 +143,7 @@ test('should render correct close icon when using close-icon prop', () => {
   )
 
   const closeIcon = container.querySelector(
-    '.nutui-popup__close-icon'
+    '.nut-popup__close-icon'
   ) as HTMLElement
   expect(closeIcon.innerHTML).toMatchSnapshot()
 })
@@ -187,7 +187,7 @@ test('event click-close-icon test', () => {
     </>
   )
   const closeIcon = container.querySelector(
-    '.nutui-popup__close-icon'
+    '.nut-popup__close-icon'
   ) as HTMLElement
   const overlay = container.querySelector('.nut-overlay') as Element
   fireEvent.click(closeIcon)

src/packages/popup/popup.scss

 @import '../icon/icon.scss';
 @import '../overlay/overlay.scss';
+
 .nut-theme-dark {
   .nut-popup {
     background: $dark6;
   }
-  .nutui-popup {
+
+  .nut-popup {
     &__close-icon {
       color: $dark1;
     }
   }
-  .popup-slide-center-enter-done {
+
+  .nut-popup-slide-center-enter-done {
     color: $dark1;
   }
 }
 
-.popup-slide {
-  &-center-enter,
-  &-center-exit {
-    opacity: 0;
-  }
-  &-center-enter-active {
-    opacity: 1;
-    transition: opacity 0.5s ease;
-  }
+.nut-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: $white;
+  color: $gray1;
+  -webkit-overflow-scrolling: touch;
 
-  &-top-enter,
-  &-top-exit {
-    transform: translate(0, -100%);
-  }
-  &-top-enter-active {
-    transform: translate(0, 0);
-  }
+  &__close-icon {
+    position: absolute !important;
+    z-index: 1;
+    color: #969799;
+    font-size: 18px;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
 
-  &-right-enter,
-  &-right-exit {
-    transform: translate(100%, 0);
-  }
-  &-right-enter-active {
-    transform: translate(0, 0);
-  }
+    &:active {
+      opacity: 0.7;
+    }
 
-  &-bottom-enter,
-  &-bottom-exit {
-    transform: translate(0, 100%);
-  }
-  &-bottom-enter-active {
-    transform: translate(0, 0);
-  }
+    &--top-left {
+      top: $popup-close-icon-margin;
+      left: $popup-close-icon-margin;
+    }
 
-  &-left-enter,
-  &-left-exit {
-    transform: translate(-100%, 0);
-  }
-  &-left-enter-active {
-    transform: translate(0, 0);
+    &--top-right {
+      top: $popup-close-icon-margin;
+      right: $popup-close-icon-margin;
+    }
+
+    &--bottom-left {
+      bottom: $popup-close-icon-margin;
+      left: $popup-close-icon-margin;
+    }
+
+    &--bottom-right {
+      right: $popup-close-icon-margin;
+      bottom: $popup-close-icon-margin;
+    }
   }
 }
 
-.popup-center {
+.nut-popup-center {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+
   &.round {
     border-radius: $popup-border-radius;
   }
 }
 
-.popup-bottom {
+.nut-popup-bottom {
   bottom: 0;
   left: 0;
   width: 100%;
+
   &.round {
     border-radius: $popup-border-radius $popup-border-radius 0 0;
   }
 }
 
-.popup-right {
+.nut-popup-right {
   top: 0;
   right: 0;
 
@@ -84,7 +91,7 @@
   }
 }
 
-.popup-left {
+.nut-popup-left {
   top: 0;
   left: 0;
 
@@ -93,7 +100,7 @@
   }
 }
 
-.popup-top {
+.nut-popup-top {
   top: 0;
   left: 0;
   width: 100%;
@@ -103,64 +110,94 @@
   }
 }
 
-.nut-popup {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background-color: $white;
-  color: $gray1;
-  transition: transform 0.5s;
-  -webkit-overflow-scrolling: touch;
-}
+.nut-popup-slide {
+  &-center-enter,
+  &-center-exit {
+    opacity: 0;
+  }
 
-.nut-overflow-hidden {
-  overflow: hidden !important;
-}
+  &-center-enter-active {
+    opacity: 1;
+    transition: opacity 0.5s ease;
+  }
 
-.nutui-popup {
-  &__close-icon {
-    position: absolute !important;
-    z-index: 1;
-    color: #969799;
-    font-size: 18px;
-    cursor: pointer;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
+  &-top-enter {
+    transform: translate(0, -100%);
+  }
 
-    &:active {
-      opacity: 0.7;
-    }
+  &-top-enter-active {
+    transform: translate(0, 0);
+    transition: transform 0.5s;
+  }
 
-    &--top-left {
-      top: $popup-close-icon-margin;
-      left: $popup-close-icon-margin;
-    }
+  &-top-exit {
+    transform: translate(0, 0);
+  }
 
-    &--top-right {
-      top: $popup-close-icon-margin;
-      right: $popup-close-icon-margin;
-    }
+  &-top-exit-active,
+  &-top-exit-done {
+    transform: translate(0, -100%);
+    transition: transform 0.5s;
+  }
 
-    &--bottom-left {
-      bottom: $popup-close-icon-margin;
-      left: $popup-close-icon-margin;
-    }
+  &-right-enter {
+    transform: translate(100%, 0);
+  }
 
-    &--bottom-right {
-      right: $popup-close-icon-margin;
-      bottom: $popup-close-icon-margin;
-    }
+  &-right-enter-active {
+    transform: translate(0, 0);
+    transition: transform 0.5s;
   }
-}
 
-.fade-enter {
-  transform: translate(0, -100%);
-}
-.fade-enter-active {
-  transform: translate(0, 0);
+  &-right-exit {
+    transform: translate(0, 0);
+  }
+
+  &-right-exit-active,
+  &-right-exit-done {
+    transform: translate(100%, 0);
+    transition: transform 0.5s;
+  }
+
+  &-bottom-enter {
+    transform: translate(0, 100%);
+  }
+
+  &-bottom-enter-active {
+    transform: translate(0, 0);
+    transition: transform 0.5s;
+  }
+
+  &-bottom-exit {
+    transform: translate(0, 0);
+  }
+
+  &-bottom-exit-active,
+  &-bottom-exit-done {
+    transform: translate(0, 100%);
+    transition: transform 0.5s;
+  }
+
+  &-left-enter {
+    transform: translate(-100%, 0);
+  }
+
+  &-left-enter-active {
+    transform: translate(0, 0);
+    transition: transform 0.5s;
+  }
+
+  &-left-exit {
+    transform: translate(0, 0);
+  }
+
+  &-left-exit-active,
+  &-left-exit-done {
+    transform: translate(-100%, 0);
+    transition: transform 0.5s;
+  }
 }
-.fade-exit {
-  transform: translate(0, -100%);
+
+.nut-overflow-hidden {
+  overflow: hidden !important;
 }

src/packages/popup/popup.taro.tsx

@@ -11,6 +11,7 @@ import { createPortal } from 'react-dom'
 import { CSSTransition } from 'react-transition-group'
 import classNames from 'classnames'
 import { EnterHandler, ExitHandler } from 'react-transition-group/Transition'
+import { ITouchEvent } from '@tarojs/components'
 import {
   OverlayProps,
   defaultOverlayProps,
@@ -19,7 +20,6 @@ import Icon from '@/packages/icon/index.taro'
 import Overlay from '@/packages/overlay/index.taro'
 import bem from '@/utils/bem'
 import { ComponentDefaults, BasicComponent } from '@/utils/typings'
-import { ITouchEvent } from '@tarojs/components'
 
 type Teleport = HTMLElement | (() => HTMLElement) | null
 
@@ -127,7 +127,7 @@ export const Popup: FunctionComponent<
   const classes = classNames(
     {
       round,
-      [`popup-${position}`]: true,
+      [`nut-popup-${position}`]: true,
       [`${popClass}`]: true,
       [`${className}`]: true,
     },
@@ -135,8 +135,8 @@ export const Popup: FunctionComponent<
   )
 
   const closeClasses = classNames({
-    'nutui-popup__close-icon': true,
-    [`nutui-popup__close-icon--${closeIconPosition}`]: true,
+    'nut-popup__close-icon': true,
+    [`nut-popup__close-icon--${closeIconPosition}`]: true,
   })
 
   const open = () => {
@@ -266,7 +266,7 @@ export const Popup: FunctionComponent<
   }, [visible])
 
   useEffect(() => {
-    setTransitionName(transition || `popup-slide-${position}`)
+    setTransitionName(transition || `nut-popup-slide-${position}`)
   }, [position])
 
   return <>{renderToContainer(teleport as Teleport, renderNode())}</>

src/packages/popup/popup.tsx

@@ -126,7 +126,7 @@ export const Popup: FunctionComponent<
   const classes = classNames(
     {
       round,
-      [`popup-${position}`]: true,
+      [`nut-popup-${position}`]: true,
       [`${popClass}`]: true,
       [`${className}`]: true,
     },
@@ -134,8 +134,8 @@ export const Popup: FunctionComponent<
   )
 
   const closeClasses = classNames({
-    'nutui-popup__close-icon': true,
-    [`nutui-popup__close-icon--${closeIconPosition}`]: true,
+    'nut-popup__close-icon': true,
+    [`nut-popup__close-icon--${closeIconPosition}`]: true,
   })
 
   const open = () => {
@@ -265,7 +265,7 @@ export const Popup: FunctionComponent<
   }, [visible])
 
   useEffect(() => {
-    setTransitionName(transition || `popup-slide-${position}`)
+    setTransitionName(transition || `nut-popup-slide-${position}`)
   }, [position])
 
   return <>{renderToContainer(teleport as Teleport, renderNode())}</>

src/sites/mobile-taro/src/app.config.ts

@@ -6,7 +6,6 @@ const subPackages = [
       'pages/cell/index',
       'pages/configprovider/index',
       'pages/icon/index',
-      'pages/image/index',
       'pages/overlay/index',
       'pages/popup/index',
     ],
@@ -68,7 +67,6 @@ const subPackages = [
     pages: [
       'pages/animate/index',
       'pages/animatingnumbers/index',
-      'pages/audio/index',
       'pages/avatar/index',
       'pages/badge/index',
       'pages/circleprogress/index',