Improve the smoothness of message box display

hbl917070 · Oct 23, 2024 · 5be1d59 · 5be1d59
1 parent a2d6bb2
commit 5be1d59
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 11 deletions.
diff --git a/Www/scss/MainWindow/_MainExif.scss b/Www/scss/MainWindow/_MainExif.scss
@@ -510,12 +510,10 @@
     top: 35px;
     transform: translateX(420px);
     transition: all 0.1s;
-    opacity: 0;
     pointer-events: none;
 
     &[active="true"] {
         transform: translateX(0px);
-        opacity: 1;
         pointer-events: initial;
     }
 

diff --git a/Www/scss/_Msgbox.scss b/Www/scss/_Msgbox.scss
@@ -32,14 +32,12 @@
     @include blur-base();
 
     // 顯示時的動畫
-    transition: all 0.1s;
-    transition-timing-function: cubic-bezier(0.6, 0.3, 0.33, 1.67);
-    opacity: 0.8;
-    transform: scaleY(1.05) translateY(0px);
+    transition: transform 0.1s;
+    // transition-timing-function: cubic-bezier(0.6, 0.3, 0.33, 1.67);
+    transform: translateY(-5px);
 }
 .msgbox-box[active="true"] {
-    opacity: 1;
-    transform: scaleY(1) translateY(0px);
+    transform: translateY(0);
 }
 
 .msgbox-txt {

diff --git a/Www/ts/MainWindow/TextEditor.ts b/Www/ts/MainWindow/TextEditor.ts
@@ -123,9 +123,11 @@ export class TextEditor {
 
 			_isShow = true;
 			_dom.style.display = "";
-			await Lib.sleep(1);
-			_dom.setAttribute("active", "true");
 
+			setTimeout(() => {
+				_dom.setAttribute("active", "true");
+			}, 10);
+
 			if (path === null) { path = "" }
 			_filePath = path;
 			let t = "";

diff --git a/Www/ts/Msgbox.ts b/Www/ts/Msgbox.ts
@@ -112,7 +112,7 @@ export class Msgbox {
 
         setTimeout(() => {
             donBox.setAttribute("active", "true");
-        }, 1);
+        }, 10);
 
         if (json.funcYes === undefined) { // 如果沒有指定按下「確定」的事件，就隱藏「取消」按鈕
             donBtnNo.style.display = "none";