router animation

package-lock.json

@@ -306,9 +306,9 @@
       }
     },
     "@overflow/commons-typescript": {
-      "version": "0.0.3",
-      "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/commons-typescript/-/commons-typescript-0.0.3.tgz",
-      "integrity": "sha512-CMPT43+Qvrc0IM5tXvJDeNoBajc82jk0l5CAfHd8u+ua3/j8+lB9ZYbnjY3LJpTcqQTe9dHbuBiBiUM9wNA7kg=="
+      "version": "0.0.5",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/commons-typescript/-/commons-typescript-0.0.5.tgz",
+      "integrity": "sha512-eHo0nB0Sp2qxodGMGC3NIA1+twpOg7CBSmJ2011qDPO7MWYMUvyWLaeilEjmcdXE4ozLBk3JMXQUWxu/3ccf0A=="
     },
     "@schematics/angular": {
       "version": "0.1.17",

package.json

@@ -33,7 +33,7 @@
     "@ngrx/router-store": "^5.2.0",
     "@ngrx/store": "^5.2.0",
     "@ngrx/store-devtools": "^5.2.0",
-    "@overflow/commons-typescript": "^0.0.3",
+    "@overflow/commons-typescript": "^0.0.5",
     "angular-l10n": "^4.1.5",
     "angularx-qrcode": "^1.1.0",
     "chart.js": "^2.7.2",

src/app/pages/infra/infra-page.component.html

@@ -5,8 +5,6 @@
                 <of-infra-map></of-infra-map>
                 <of-infra-map></of-infra-map>
                 <of-infra-map></of-infra-map>
-                <of-infra-map></of-infra-map>
-                <of-infra-map></of-infra-map>
             </div>
         </div>
     </div>

src/app/pages/pages-animation.ts

@@ -8,19 +8,40 @@ import {
   keyframes,
   state,
   group,
+  animateChild
 } from '@angular/animations';
 
-export const fadeAnimation = trigger('pageRouteAnim', [
-  transition('* => *', [
-    query(':enter',
-      style({ opacity: 0 }), { optional: true }),
-    query(':enter',
-      stagger('300ms', [
-        animate('6s ease-in', keyframes([
-          style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }),
-          style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
-          style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
-        ]))]), { optional: true })
+export const slide = trigger('routerAnim', [
+  transition('* <=> *', [
+    query(':enter, :leave', style({ position: 'fixed', width: '100%' })
+      , { optional: true }),
+    group([
+      query(':enter', [
+        style({ transform: 'translateX(-100%)' }),
+        animate('0.4s ease-in-out', style({ transform: 'translateX(0%)' }))
+      ], { optional: true }),
+      query(':leave', [
+        style({ transform: 'translateX(0%)' }),
+        animate('0.4s ease-in-out', style({ transform: 'translateX(100%)' }))
+      ], { optional: true }),
+    ])
+  ])
+]);
+
+export const fade = trigger('routerAnim', [
+  transition('* <=> *', [
+    query(':enter, :leave', style({ position: 'fixed', width: '100%' })
+      , { optional: true }),
+    group([
+      query(':enter', [
+        style({ opacity: 0 }),
+        animate('0.4s ease-in-out', style({ opacity: 1 }))
+      ], { optional: true }),
+      query(':leave', [
+        style({ opacity: 1 }),
+        animate('0.4s ease-in-out', style({ opacity: 0 }))
+      ], { optional: true }),
+    ])
   ])
 ]);
 

src/app/pages/pages.component.html

@@ -20,10 +20,11 @@
         <div class="layout-main">
             <of-breadcrumb></of-breadcrumb>
 
-            <div class="layout-content" [@pageRouteAnim]="outlet.isActivated ? outlet.activatedRoute : ''">
-                <router-outlet #outlet="outlet"></router-outlet>
-                <of-footer></of-footer>
+            <div class="layout-content" [@routerAnim]="getRouterOutletState(o)">
+                <router-outlet #o="outlet"></router-outlet>
             </div>
+
+            <of-footer></of-footer>
         </div>
 
         <of-rightpanel></of-rightpanel>

src/app/pages/pages.component.ts

@@ -1,7 +1,7 @@
 import { Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, OnInit, NgZone } from '@angular/core';
 import { ScrollPanel } from 'primeng/primeng';
 import { Router } from '@angular/router';
-import { fadeAnimation } from './pages-animation';
+import { slide, fade } from './pages-animation';
 enum MenuOrientation {
   STATIC,
   OVERLAY,
@@ -13,7 +13,7 @@ enum MenuOrientation {
   selector: 'of-pages',
   templateUrl: './pages.component.html',
   styleUrls: ['./pages.component.scss'],
-  animations: [ fadeAnimation ]
+  animations: [ slide ],
 })
 export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
   layoutCompact = true;
@@ -327,9 +327,8 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
     layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
   }
 
-  prepareRouteTransition(outlet) {
-    const animation = outlet.activatedRouteData['animation'] || {};
-    return animation['value'] || null;
+  public getRouterOutletState(outlet) {
+    return outlet.isActivated ? outlet.activatedRoute : '';
   }
 
 }

src/app/pages/probes/noauth-probe/noauth-probe-page.component.html

@@ -1,2 +1 @@
-container로 교체
-<!-- <of-noauth-list></of-noauth-list> -->
+<of-noauth-list-container></of-noauth-list-container>

src/styles.scss

@@ -319,11 +319,9 @@ body .ui-progressbar .ui-progressbar-value {
 .font-s{
     font-size: 80%;
 }
-
-
+.layout-content {
+    min-height: calc(100vh - 215px);
+}
 .footer {
-    clear: both;
-    position: relative;
-    z-index: 10;
-    height: 3em;
-  }
+    height: 50px;
+}