消息通知提示框优化

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 {