替换通知组件图标.适应性调整动效添加后分页涉及事件

src/components/notification-group/notification-group.ts

@@ -73,6 +73,10 @@ export class StarNotificationGroup extends LitElement {
     ratio = ratio < 0 ? 0 : ratio
     this.contentOpacity = ratio
     this.containerHeight = value
+    let id = window.setTimeout(() => {
+      window.clearTimeout(id)
+      this.dispatchEventFurther()
+    }, 300)
   }
 
   _singleHeight!: number
@@ -105,6 +109,10 @@ export class StarNotificationGroup extends LitElement {
 
   firstUpdated() {
     this.show = false
+    let id = window.setTimeout(() => {
+      window.clearTimeout(id)
+      this.dispatchEventFurther()
+    }, 300)
   }
 
   @eventOptions({passive: false})
@@ -261,36 +269,12 @@ export class StarNotificationGroup extends LitElement {
     let isShow = this.show
     if (isShow) {
       // 当前是展开状态，点击需折叠
-      let self = this
       this.show = false
       firstChild.setAttribute('radiusType', 'border-radius')
       firstChild.withArrowUp = false
       firstChild.setAttribute('notificationType', 'more-notifiactions-first')
-      this.slotElements.forEach((element, index) => {
-        if (element !== firstChild) {
-          ;(element as StarNotification).classList.add('animation-out')
-          element.addEventListener('animationend', function tEnd() {
-            if (index == self.slotElements.length - 1) {
-              self.show = false
-              self.dispatchEventFurther()
-            }
-            ;(element as StarNotification).classList.remove('animation-out')
-            element.removeEventListener('animationend', tEnd)
-          })
-        }
-      })
     } else {
       this.show = true
-      this.dispatchEventFurther()
-      this.slotElements.forEach((element) => {
-        if (element !== firstChild) {
-          ;(element as StarNotification).classList.add('animation-in')
-          element.addEventListener('animationend', function tEnd() {
-            element.removeEventListener('animationend', tEnd)
-            ;(element as StarNotification).classList.remove('animation-in')
-          })
-        }
-      })
       firstChild.setAttribute('radiusType', 'top-border-radius')
       firstChild.withArrowUp = true
       firstChild.setAttribute('notificationType', 'more-notifiactions')

src/components/notification/notificationstyle.ts

@@ -22,8 +22,6 @@ export const sharedStyles: CSSResult = css`
     --more-text-color-lm: rgba(64, 64, 64, 0.65);
     --more-text-color-dm: rgba(224, 224, 224, 1);
 
-    // width: 71.7vw;
-    // height: 7.9vh;
     width: calc(860px / var(--hostDevicePixelRatio));
     height: var(--auto-152px);
     display: block;
@@ -51,8 +49,7 @@ export const sharedStyles: CSSResult = css`
 
   .deletebybtn {
     transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
-    transform: opacity translateX(-2.5vw);
+    transform: opacity translateX(-2.5vmin);
-    // animation: notification-disappear 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
   }
 
   .notification[clicked] {
@@ -66,33 +63,20 @@ export const sharedStyles: CSSResult = css`
   }
 
   .top-border-radius {
-    // border-top-left-radius: 1.7vw;
-    // border-top-right-radius: 1.7vw;
-
     border-top-left-radius: var(--auto-20px);
     border-top-right-radius: var(--auto-20px);
   }
 
   .bottom-border-radius {
-    // border-bottom-left-radius: 1.7vw;
-    // border-bottom-right-radius: 1.7vw;
     border-bottom-left-radius: var(--auto-20px);
     border-bottom-right-radius: var(--auto-20px);
   }
 
   .border-radius {
-    // border-radius: 1.7vw;
     border-radius: var(--auto-20px);
   }
 
   .notification > img {
-    // width: 48px;
-    // height: 48px;
-    // pointer-events: none;
-    // margin: 26px 10px 78px 26px;
-
-    // width: 4vw;
-    // height: 4vw;
     width: var(--auto-48px);
     height: var(--auto-48px);
     position: absolute;
@@ -123,10 +107,8 @@ export const sharedStyles: CSSResult = css`
 
     // height: 28px;
     // line-height: 28px;
-    // font-size: 28px;
 
     line-height: 1;
-    // font-size: 2.3vw;
     font-size: var(--auto-28px);
     max-width: var(--auto-640px);
   }
@@ -145,16 +127,8 @@ export const sharedStyles: CSSResult = css`
     opacity: 0.65;
 
     // height: 32px;
-    // right: 32px;
     // top: -4px;
-    // font-size: 24px;
     // line-height: 32px;
-
-    // right: 10.67px;
-    // top: -1.33px;
-    // font-size: 2vw;
-    line-height: 1;
-    // right: 3.7%;
     font-size: var(--auto-24px);
     right: var(--auto-32px);
     line-height: var(--auto-24px);
@@ -180,14 +154,8 @@ export const sharedStyles: CSSResult = css`
     font-weight: 400;
     mix-blend-mode: normal;
     opacity: 0.65;
-    // font-size: 2.2vw;
-
     font-size: var(--auto-26px);
     max-width: var(--auto-640px);
-    // width: 246px;
-    // height: 11px;
-    // font-size: 8px;
-    // line-height: 11px;
   }
 
   .notification > div.detail .arrow-up {
@@ -197,18 +165,8 @@ export const sharedStyles: CSSResult = css`
     vertical-align: middle;
     display: none;
 
-    // width: 56px;
-    // height: 34px;
-    // right: 26px;
-    // bottom: 30px;
-    // line-height: 34px;
-    // border-radius: 189px;
-
-    // height: 1.8vh;
-    // width: 4.7vw;
     right: 3%;
     bottom: 19.7%;
-    // border-radius: 15.75vw;
 
     text-align: center;
     vertical-align: middle;
@@ -220,22 +178,18 @@ export const sharedStyles: CSSResult = css`
   }
 
   .notification > div.detail .arrow-up::after {
-    font-family: 'gaia-icons';
+    font-family: 'star-icons';
     content: attr(data-icon);
     font-style: normal;
     text-rendering: optimizeLegibility;
     font-weight: 500;
-    font-size: 1.33vw;
-
-    // font-size: 35px;
-    // font-size: 12px;
-
-    width: 1.33vw;
-    height: 1.33vw;
-
     width: var(--auto-16px);
     height: var(--auto-16px);
     font-size: var(--auto-16px);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
   }
 
   .one,
@@ -271,15 +225,11 @@ export const sharedStyles: CSSResult = css`
     border-radius: 50%;
     opacity: 0.6;
     transition: transform 0.1s;
-    width: 6.7vw;
-    height: 6.7vw;
-
     width: var(--auto-80px);
     height: var(--auto-80px);
   }
 
   .btn-tool > div:first-child {
-    // margin-right: 3.7vw;
     margin-right: calc(44px / var(--hostDevicePixelRatio));
     visibility: hidden;
   }
@@ -299,7 +249,7 @@ export const sharedStyles: CSSResult = css`
     text-align: center;
     vertical-align: middle;
     content: attr(data-icon);
-    font-family: gaia-icons;
+    font-family: 'star-icons';
     font-style: normal;
     text-rendering: optimizelegibility;
     font-weight: 500;
@@ -307,11 +257,7 @@ export const sharedStyles: CSSResult = css`
     // width: 32px;
     // height: 32px;
     // line-height: 32px;
-    // font-size: 32px;
 
-    width: 40%;
-    height: 40%;
-    // font-size: 2.7vw;
     font-size: var(--auto-32px);
   }
 
@@ -334,15 +280,6 @@ export const sharedStyles: CSSResult = css`
     flex: none;
     order: 0;
     flex-grow: 0;
-
-    //   height: 28px;
-    //   line-height: 28px;
-    //   font-size: 28px;
-
-    // height: 18.4%;
-    // line-height: 1;
-    // font-size: 1.45vh;
-    // font-size: 2.3vw;
     font-size: var(--auto-28px);
     line-height: var(--auto-38px);
     height: var(--auto-38px);
@@ -377,17 +314,7 @@ export const sharedStyles: CSSResult = css`
     text-overflow: ellipsis;
     max-width: 40%;
 
-    // height: 34px;
-    // line-height: 34px;
-    // left: 24px;
-    // top: -3px;
-    // font-size: 26px;
-
     left: 0.93%;
-    // top: -3px;
-    // top: -2%;
-    // top: -0.16vh;
-    // font-size: 1.35vh;
     font-size: var(--auto-26px);
   }
 
@@ -404,24 +331,9 @@ export const sharedStyles: CSSResult = css`
     text-align: right;
     mix-blend-mode: normal;
     opacity: 0.65;
-
-    // height: 34px;
-    // right: 34px;
-    // top: -4px;
-    // font-size: 24px;
-    // line-height: 32px;
-
-    // height: 11px;
-    // right: 11px;
-    // top: -1px;
-    // font-size: 8px;
-    // line-height: 11px;
-
-    // height: 1.8vh;
     height: var(--auto-34px);
     right: var(--auto-32px);
     line-height: var(--auto-34px);
-    // font-size: 2vw;
     font-size: var(--auto-24px);
   }
 
@@ -430,31 +342,12 @@ export const sharedStyles: CSSResult = css`
     text-align: center;
     vertical-align: middle;
     opacity: 0.55;
-
-    // width: 56px;
-    // height: 34px;
-    // right: 26px;
-    // bottom: 30px;
-    // top: -1px;
-    // line-height: 34px;
-    // font-size: 20px;
-    // border-radius: 189px;
-
-    // width: 4.7vw;
-    // height: 1.8vh;
-    // right: 3%;
-    // bottom: 19.7%;
-    // border-radius: 15.75vw;
-    // top: -0.08vw;
-    // font-size: 1.7vw;
-    // line-height: 1.8vh;
-
     width: var(--auto-56px);
     height: var(--auto-34px);
     right: 3%;
     bottom: 19.7%;
     border-radius: calc(189px / var(--hostDevicePixelRatio));
-    top: -0.08vw;
+    top: -0.08vmin;
     font-size: var(--auto-20px);
     line-height: var(--auto-34px);
     vertical-align: middle;
@@ -486,7 +379,7 @@ export const sharedStyles: CSSResult = css`
     text-align: center;
     vertical-align: middle;
     content: attr(data-icon);
-    font-family: 'gaia-icons';
+    font-family: 'star-icons';
     font-style: normal;
     font-size: var(--auto-48px);
     text-rendering: optimizelegibility;
@@ -638,16 +531,6 @@ export const sharedStyles: CSSResult = css`
     }
   }
 
-  @keyframes notification-disappear {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-    }
-  }
-
   .click-start {
     transition: transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
     transform: scale(0.95);
@@ -674,22 +557,4 @@ export const sharedStyles: CSSResult = css`
       background: var(--notification-background-lm);
     }
   }
-
-  :host(.animation-in) {
-    animation: show 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
-  }
-
-  :host(.animation-out) {
-    animation: notification-disappear 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
-  }
-
-  @keyframes show {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
 `