From c652f228a69f4960c0b36122675b1c2ec435c3ed Mon Sep 17 00:00:00 2001 From: insanity Date: Fri, 18 May 2018 19:12:36 +0900 Subject: [PATCH] router animation --- package-lock.json | 6 +-- package.json | 2 +- src/app/pages/infra/infra-page.component.html | 2 - src/app/pages/pages-animation.ts | 43 ++++++++++++++----- src/app/pages/pages.component.html | 7 +-- src/app/pages/pages.component.ts | 9 ++-- .../noauth-probe-page.component.html | 3 +- src/styles.scss | 12 +++--- 8 files changed, 50 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8ca1361..60139e4 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 0f1b8b6..11973b3 100644 --- a/package.json +++ b/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", diff --git a/src/app/pages/infra/infra-page.component.html b/src/app/pages/infra/infra-page.component.html index 0d25047..384a965 100644 --- a/src/app/pages/infra/infra-page.component.html +++ b/src/app/pages/infra/infra-page.component.html @@ -5,8 +5,6 @@ - - diff --git a/src/app/pages/pages-animation.ts b/src/app/pages/pages-animation.ts index 2760e2c..8b747b4 100644 --- a/src/app/pages/pages-animation.ts +++ b/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 }), + ]) ]) ]); diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 3cdd4ef..6018817 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -20,10 +20,11 @@
-
- - +
+
+ +
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index dba2608..308e08e 100644 --- a/src/app/pages/pages.component.ts +++ b/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 : ''; } } diff --git a/src/app/pages/probes/noauth-probe/noauth-probe-page.component.html b/src/app/pages/probes/noauth-probe/noauth-probe-page.component.html index d5187b7..53697d2 100644 --- a/src/app/pages/probes/noauth-probe/noauth-probe-page.component.html +++ b/src/app/pages/probes/noauth-probe/noauth-probe-page.component.html @@ -1,2 +1 @@ -container로 교체 - \ No newline at end of file + \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index a23092b..431372b 100644 --- a/src/styles.scss +++ b/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; - } \ No newline at end of file + height: 50px; +} \ No newline at end of file