修改对话框动画

mdui_patched/components/dialog/index.js

@@ -103,6 +103,7 @@ let Dialog = class Dialog extends MduiElement {
         ]);
         // 打开
         // 要区分是否首次渲染，首次渲染不触发事件，不执行动画；非首次渲染，触发事件，执行动画
+        this.panelRef.value.style.transformOrigin = 'center center';
         if (this.open) {
             if (hasUpdated) {
                 const eventProceeded = this.emit('open', { cancelable: true });
@@ -136,8 +137,34 @@ let Dialog = class Dialog extends MduiElement {
                     this.panelRef.value.focus({ preventScroll: true });
                 }
             });
-            const duration = getDuration(this, 'medium4');
+            // const duration = getDuration(this, 'medium4');
+            const duration = hasUpdated ? getDuration(this, 'medium4') : 0;
             await Promise.all([
+                // 遮罩层淡入
+                animateTo(this.overlayRef.value, [
+                    { opacity: 0 },
+                    { opacity: 1 }
+                ], {
+                    duration: hasUpdated ? duration * 0.7 : 0,
+                    easing: easingLinear,
+                }),
+
+                // 面板缩放淡入
+                animateTo(this.panelRef.value, [
+                    {
+                        opacity: 0,
+                        transform: 'scale(0.8)',
+                    },
+                    {
+                        opacity: 1,
+                        transform: 'scale(1)'
+                    }
+                ], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingEmphasizedDecelerate,
+                }),
+            ]);
+            /* await Promise.all([
                 animateTo(this.overlayRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.3 }, { opacity: 1 }], {
                     duration: hasUpdated ? duration : 0,
                     easing: easingLinear,
@@ -162,7 +189,7 @@ let Dialog = class Dialog extends MduiElement {
                     duration: hasUpdated ? duration : 0,
                     easing: easingLinear,
                 })),
-            ]);
+            ]); */
             if (hasUpdated) {
                 this.emit('opened');
             }
@@ -174,8 +201,32 @@ let Dialog = class Dialog extends MduiElement {
             }
             this.modalHelper.deactivate();
             await stopAnimation();
-            const duration = getDuration(this, 'short4');
+            // const duration = getDuration(this, 'short4');
+            const duration = getDuration(this, 'short3');
             await Promise.all([
+                // 遮罩层淡出
+                animateTo(this.overlayRef.value, [
+                    { opacity: 1 },
+                    { opacity: 0 }
+                ], {
+                    duration,
+                    easing: easingLinear,
+                }),
+
+                // 面板缩放淡出
+                animateTo(this.panelRef.value, [
+                    {
+                        opacity: 1,
+                    },
+                    {
+                        opacity: 0,
+                    }
+                ], {
+                    duration,
+                    easing: easingEmphasizedAccelerate,
+                }),
+            ]);
+            /* await Promise.all([
                 animateTo(this.overlayRef.value, [{ opacity: 1 }, { opacity: 0 }], {
                     duration,
                     easing: easingLinear,
@@ -186,7 +237,7 @@ let Dialog = class Dialog extends MduiElement {
                 ], { duration, easing: easingEmphasizedAccelerate }),
                 animateTo(this.panelRef.value, [{ opacity: 1 }, { opacity: 1, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear }),
                 ...children.map((child) => animateTo(child, [{ opacity: 1 }, { opacity: 0, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear })),
-            ]);
+            ]); */
             this.style.display = 'none';
             unlockScreen(this);
             // 对话框关闭后，恢复焦点到原有的元素上