feat: ✨ 使用Transition重构Popup为center类型的Popup添加zoom-in动画 (#699)

* feat: ✨ 使用Transition重构Popup为center类型的Popup添加zoom-in动画

✅ Closes: #687

* fix: 🐛 修复 Transition 动画类名重复的问题

Author: Moonofweisheng

docs/component/popup.md

@@ -8,7 +8,21 @@
 `v-model` 为绑定值，表示是否展示弹出层。
 
 ```html
-<wd-popup v-model="show" custom-style="padding: 30px 40px;" @close="handleClose">内容</wd-popup>
+<wd-popup v-model="show" custom-style="border-radius:32rpx;" @close="handleClose">
+  <text class="custom-txt">弹弹弹</text>
+</wd-popup>
+```
+```css
+.custom-txt {
+  color: black;
+  width: 400rpx;
+  height: 400rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 40rpx;
+  border-radius: 32rpx;
+}
 ```
 
 ## 弹出位置
@@ -89,6 +103,7 @@ h5 滚动穿透不需要处理，组件已默认开启 `lock-scroll`。
 | hide-when-close | 是否当关闭时将弹出层隐藏（display: none) | boolean | - | true | - |
 | lazy-render | 弹层内容懒渲染，触发展示时才渲染内容 | boolean | - | true | - |
 | safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | false | - |
+| transition | 动画类型，参见 wd-transition 组件的name | string | fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in | - | - |
 | lockScroll | 是否锁定背景滚动 | boolean | - | true | 0.1.30 |
 
 ## Events

src/App.vue

@@ -1,3 +1,12 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2024-10-12 13:07:08
+ * @LastEditTime: 2024-11-08 13:14:48
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: \wot-design-uni\src\App.vue
+ * 记得注释
+-->
 <script setup lang="ts">
 import { onLaunch, onShow, onHide, onThemeChange } from '@dcloudio/uni-app'
 import { useDark } from './store'
@@ -7,7 +16,7 @@ onThemeChange((option) => {
   darkMode.setDark(option.theme === 'dark')
 })
 
-onLaunch((ctx) => {
+onLaunch(() => {
   const systemInfo = uni.getSystemInfoSync()
   darkMode.setDark(systemInfo.theme === 'dark')
 
@@ -18,8 +27,6 @@ onLaunch((ctx) => {
     // 处理收到的消息
     if (typeof event.data === 'boolean') {
       darkMode.setDark(event.data)
-    } else {
-      darkMode.setDark(false)
     }
   })
   // #endif

src/pages/popup/Index.vue

@@ -45,7 +45,9 @@
         </wd-cell-group>
       </demo-block>
 
-      <wd-popup v-model="show1" custom-style="padding: 30px 40px;" @close="handleClose1"><text class="custom-txt">内容</text></wd-popup>
+      <wd-popup v-model="show1" @close="handleClose1" custom-style="border-radius:32rpx;">
+        <text class="custom-txt">弹弹弹</text>
+      </wd-popup>
       <wd-popup v-model="show2" position="top" custom-style="height: 200px;" @close="handleClose2"></wd-popup>
       <wd-popup v-model="show3" position="right" custom-style="width: 200px;" @close="handleClose3"></wd-popup>
       <wd-popup v-model="show4" position="bottom" custom-style="height: 200px;" @close="handleClose4"></wd-popup>
@@ -168,5 +170,12 @@ function handleClose10() {
 
 .custom-txt {
   color: black;
+  width: 400rpx;
+  height: 400rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 40rpx;
+  border-radius: 32rpx;
 }
 </style>

src/pages/transition/Index.vue

@@ -16,6 +16,7 @@
       </demo-block>
       <demo-block title="Zoom 动画">
         <wd-button @click="zoomIn">zoom-in</wd-button>
+        <wd-button @click="zoomOut">zoom-out</wd-button>
       </demo-block>
       <demo-block title="自定义动画">
         <wd-button @click="custom">custom</wd-button>
@@ -25,7 +26,6 @@
 
       <wd-transition
         :show="customShow"
-        name=""
         :duration="{ enter: 700, leave: 1000 }"
         enter-class="custom-enter"
         enter-active-class="custom-enter-active"
@@ -39,10 +39,11 @@
   </view>
 </template>
 <script lang="ts" setup>
+import type { TransitionName } from '@/uni_modules/wot-design-uni/components/wd-transition/types'
 import { ref } from 'vue'
 
 const show = ref<boolean>(false)
-const name = ref<any>('')
+const name = ref<TransitionName>()
 const customShow = ref<boolean>(false)
 function fade() {
   transition('fade')
@@ -74,13 +75,16 @@ function slideRight() {
 function zoomIn() {
   transition('zoom-in')
 }
+function zoomOut() {
+  transition('zoom-out')
+}
 function custom() {
   customShow.value = true
   setTimeout(() => {
     customShow.value = false
   }, 1200)
 }
-function transition(transition: string) {
+function transition(transition: TransitionName) {
   name.value = transition
   show.value = true
   setTimeout(() => {

src/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss

@@ -103,6 +103,23 @@
   }
 }
 
+/* 定义状态（m） */
+@mixin mdeep($modifier...) {
+  $selectors: "";
+
+  @each $item in $modifier {
+    $selectors: #{$selectors + & + $modifierSeparator + $item + ","};
+  }
+
+  @at-root {
+    :deep() {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
 /* 对于需要需要嵌套在 m 底下的 e，调用这个混合宏，一般在切换整个组件的状态，如切换颜色的时候 */
 @mixin me($element...) {
   $selector: &;

src/uni_modules/wot-design-uni/components/wd-popup/index.scss

@@ -1,23 +1,33 @@
 @import './../common/abstracts/_mixin.scss';
 @import './../common/abstracts/variable.scss';
-@import '../wd-overlay/index.scss';
 
 .wot-theme-dark {
-  @include b(popup) {
-    background: $-dark-background2;
+  @include b(popup-wrapper) {
+    :deep() {
+      .wd-popup {
+        background: $-dark-background2;
+      }
+
+      .wd-popup__close {
+        color: $-dark-color;
+      }
+    }
+  }
+}
 
-    @include e(close) {
-      color: $-dark-color;
+@include b(popup-wrapper) {
+  :deep() {
+    .wd-popup {
+      position: fixed;
+      max-height: 100%;
+      overflow-y: auto;
+      background: #fff;
     }
   }
 }
 
-@include b(popup) {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background: #fff;
 
+@include b(popup) {
   @include edeep(close) {
     position: absolute;
     top: 10px;
@@ -27,86 +37,48 @@
     transform: rotate(-45deg);
   }
 
-  @include m(center) {
+  @include mdeep(center) {
     left: 50%;
     top: 50%;
     transform: translate3d(-50%, -50%, 0);
+    transform-origin: 0% 0%;
+
+    &.wd-zoom-in-enter,
+    &.wd-zoom-in-leave-to {
+      transform: scale(0.8) translate3d(-50%, -50%, 0) !important;
+    }
+
+    @include when(deep) {
+
+      &.wd-zoom-in-enter,
+      &.wd-zoom-in-leave-to {
+        transform: scale(0.1) translate3d(-50%, -50%, 0) !important;
+      }
+    }
+
   }
 
-  @include m(left) {
+  @include mdeep(left) {
     top: 0;
     bottom: 0;
     left: 0;
   }
 
-  @include m(right) {
+  @include mdeep(right) {
     top: 0;
     right: 0;
     bottom: 0;
   }
 
-  @include m(top) {
+  @include mdeep(top) {
     top: 0;
     left: 0;
     right: 0;
   }
 
-  @include m(bottom) {
+  @include mdeep(bottom) {
     right: 0;
     bottom: 0;
     left: 0;
   }
-}
-
-.wd-center-enter-active,
-.wd-center-leave-active {
-  transition-property: opacity;
-}
-
-.wd-center-enter,
-.wd-center-leave-to {
-  opacity: 0;
-}
-
-.wd-top-enter-active,
-.wd-top-leave-active,
-.wd-bottom-enter-active,
-.wd-bottom-leave-active,
-.wd-left-enter-active,
-.wd-left-leave-active,
-.wd-right-enter-active,
-.wd-right-enter-active {
-  transition-property: transform;
-}
-
-.wd-top-enter,
-.wd-top-leave-to {
-  transform: translate3d(0, -100%, 0);
-}
-
-.wd-bottom-enter,
-.wd-bottom-leave-to {
-  transform: translate3d(0, 100%, 0);
-}
-
-.wd-left-enter,
-.wd-left-leave-to {
-  transform: translate3d(-100%, 0, 0);
-}
-
-.wd-right-enter,
-.wd-right-leave-to {
-  transform: translate3d(100%, 0, 0);
-}
-
-.wd-zoom-in-enter-active,
-.wd-zoom-in-leave-active {
-  transition-property: opacity, transform;
-  transform-origin: center center;
-}
-
-.wd-zoom-in-enter,
-.wd-zoom-in-leave-to {
-  opacity: 0;
-  transform: translate3d(-50%, -50%, 0) scale(0.7);
 }