消息通知提示框优化

src/app/components/toast/toast-box.component.html

@@ -1,5 +1,5 @@
 <div class="toast-container"  [ngClass]="toastPosition">
-    <div *ngFor="let toastCfg of getToastConfigs()" [@animation]="toastAnimation">
+    <div class="toast-list" *ngFor="let toastCfg of getToastConfigs()" [@animation]="toastAnimation">
         <toast [config]="toastCfg" (dismissed)="remove(toastCfg)"></toast>
     </div>
 </div>

src/app/components/toast/toast-box.component.scss

@@ -1,10 +1,10 @@
 .toast-container {
     position: absolute;
     z-index: 22222;
-    margin-top:10px;
+    // margin-top:10px;
     width:450px;
-    height: 174px;
-    overflow: hidden
+    // height: 174px;
+    // overflow: hidden
   }
 
   .toast-top-left{
@@ -34,5 +34,12 @@
     left: 10px;
     bottom:0;
   }
+  .toast-list{
+    height: 100px;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
   
   

src/app/components/toast/toast-box.component.ts

@@ -13,22 +13,12 @@ import {ToastConfig} from './toast-model';
   styleUrls:['./toast-box.component.scss'],
   animations: [
     trigger('animation', [
-      state('none', style({})),
-      state('decent', style([{opacity: 1}, {maxWidth: 450}])),
-      state('fancy', style([{transform: 'translateX(0)'},{transform: 'translateY(0)'}, {opacity: 1}, {maxWidth: 450}])),
       transition('void => fancy', [
-        style({opacity: 0, maxWidth: 450, transform: 'translateX(100%)'}),
-        animate('1000ms ease-in-out')
+        style({opacity: 1, maxWidth: 450, transform: 'translateX(100%)'}),
+        animate('500ms ease-in-out')
       ]),
       transition('fancy => void', [
-        animate('1000ms ease-in-out', style({transform: 'translateX(100%)', height: 0, opacity: 0}))
-      ]),
-      transition('void => decent', [
-        style({opacity: 0, maxWidth: 0}),
-        animate('1000ms ease-in-out')
-      ]),
-      transition('decent => void', [
-        animate('1000ms ease-in-out', style({width: 0, opacity: 0}))
+        animate('500ms ease-in-out', style({transform: 'translateX(100%)'}))
       ])
     ])
   ]
@@ -41,7 +31,7 @@ export class ToastBoxComponent implements OnInit {
 
   constructor(private toastService: ToastService) { 
       this.toastService.getToasts().forEach((config: ToastConfig) => {
-         this.toastConfigs.unshift(config);
+         this.toastConfigs.push(config);
       });
   }
 

src/app/components/toast/toast.component.scss

@@ -5,5 +5,8 @@
     -moz-box-shadow: 1px 1px 3px rgba(100, 100, 100, 0.3);
     border-radius: 20px;
  }
+ .c-toast{
+     height: 100%;
+ }
 
 

src/app/pages/main/main.component.scss

@@ -3,6 +3,7 @@
     width: 100%;
     height: 100%;
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 15px 10px;
     background-color: #fff;
     .page-content {

src/index.html

@@ -47,80 +47,10 @@
                 transform: rotate(1turn)
             }
         }
-
-        /* .spin-container {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                z-index: 1003;
-                display: none;
-            }
-    
-            .spin-container .spin1 {
-                display: block;
-                position: relative;
-                left: calc(50% + 15px);
-                top: calc(50% - 75px);
-                width: 150px;
-                height: 150px;
-                margin: -75px 0 0 -75px;
-                border-radius: 50%;
-                border: 4px solid transparent;
-                border-top-color: #f95372;
-                transform: translateZ(0);
-                animation: spin 2s linear infinite
-            }
-    
-            .spin-container .spin2 {
-                content: "";
-                position: absolute;
-                top: 5px;
-                left: 5px;
-                right: 5px;
-                bottom: 5px;
-                border-radius: 50%;
-                border: 4px solid transparent;
-                border-top-color: #00abff;
-                -webkit-animation: spin 3s linear infinite;
-                animation: spin 3s linear infinite
-            }
-    
-            .spin-container .spin3 {
-                content: "";
-                position: absolute;
-                top: 15px;
-                left: 15px;
-                right: 15px;
-                bottom: 15px;
-                border-radius: 50%;
-                border: 4px solid transparent;
-                border-top-color: #e7ba08;
-                animation: spin 1.5s linear infinite
-            } */
     </style>
 </head>
 
 <body>
-    <!-- <div class="spin-container" id="pageSpin">
-        <div class="spin1">
-            <div class="spin2"></div>
-            <div class="spin3"></div>
-        </div>
-    </div> -->
-    <!-- <script type="text/javascript">
-        const initialize = function () {
-            let pageSpin = document.getElementById("pageSpin");
-            pageSpin.style.display = 'block';
-            document.onreadystatechange = function () {
-                if (document.readyState == "complete") {
-                    pageSpin.style.display = 'none';
-                }
-            }
-        }
-        initialize();
-    </script> -->
     <app-root></app-root>
 </body>