fix: 修复 toast loading 动画消失文字和图标不同步问题

hellof2e · Oct 19, 2023 · ae83fc8 · ae83fc8
1 parent 50311d0
commit ae83fc8
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/packages/quarkd/src/toast/index.tsx b/packages/quarkd/src/toast/index.tsx
@@ -48,40 +48,51 @@ class QuarkToast extends QuarkElement {
 
   toastRef: any = createRef();
 
+  loadingtRef: any = createRef();
+
   static allowMultiple = false;
 
   componentDidMount(): void {
-    this.dRemove = false;
     const el = this.toastRef.current;
     if (el) {
       el.addEventListener("transitionend", () => {
+        this.dRemove = false;
+        // 有两次动画开始和借宿，结束的时候在移除节点
+        if (!el.classList.contains("quark-toast-leave")) return;
         if (el && el.parentNode && !this.show) {
-          el.parentNode.removeChild(el);
+          try {
+            // document.body.removeChild(this);
+          } catch (error) {
+            // todo something
+          }
         }
       });
     }
   }
 
-  // 删除 toast dom
-  transitionendChange = () => {
-    if (!this.show && this.dRemove) {
-      document.body.removeChild(this);
-    }
-  };
+  // // 删除 toast dom
+  // transitionendChange = () => {
+  //   if (!this.show && this.dRemove) {
+  //     document.body.removeChild(this);
+  //   }
+  // };
 
   shouldComponentUpdate(
     propName: string,
     oldValue: string | boolean,
     newValue: string | boolean
   ): boolean {
     if (propName === "show") {
+      const { current: loadingtCurrent } = this.loadingtRef;
       if (this.toastRef && this.toastRef.current) {
         const { current } = this.toastRef;
         // 设置退出过渡动画
         if (newValue) {
           // 由关闭到打开
           current.classList.remove("quark-toast-leave");
         } else {
+          if (loadingtCurrent)
+            loadingtCurrent.classList.add("quark-loading-leave");
           current.classList.add("quark-toast-leave");
         }
       }
@@ -131,7 +142,7 @@ class QuarkToast extends QuarkElement {
         >
           {this.type !== "text" && this.renderIcon()}
           <quark-loading
-            class="loading"
+            ref={this.loadingtRef}
             size={this.iconSize}
             color="#ffffff"
             type="circular"

diff --git a/packages/quarkd/src/toast/style.css b/packages/quarkd/src/toast/style.css
@@ -64,19 +64,23 @@ quark-icon-whitewarning-o {
 }
 
 :host quark-loading {
-  display: none;
+  display: block;
+  margin-right: var(--toast-loading-right, 0);
+  margin-bottom: var(--toast-loading-bottom, 14px);
+}
+:host([type="loading"]) .quark-toast--horizontal quark-loading {
+  margin-bottom: var(--toast-loading-bottom) !important;
+  margin-right: var(--toast-loading-right, 18px) !important;
 }
 
 :host([show][type="loading"]) quark-loading {
+  opacity: 1;
   display: block;
-  margin-bottom: var(--toast-loading-bottom, 14px);
-  margin-right: var(--toast-loading-right, 0);
 }
 
 :host([show][type="loading"]) .quark-toast--horizontal quark-loading {
+  opacity: 1;
   display: block;
-  margin-bottom: var(--toast-loading-bottom, 0);
-  margin-right: var(--toast-loading-right, 8px);
 }
 
 :host(:not([type="text"])) quark-icon-whitesuccess-o,
@@ -88,4 +92,8 @@ quark-icon-whitewarning-o {
 :host .quark-toast-leave {
   opacity: 0;
   transition: opacity var(--toast-transition-fade-out, 0.3s) ease-out;
+}
+:host .quark-loading-leave {
+  opacity: 0;
+  transition: opacity var(--toast-transition-fade-out, 0.4s) ease-out;
 }