router animation

This commit is contained in:
insanity 2018-05-18 19:12:36 +09:00
parent 94ae1ef451
commit c652f228a6
8 changed files with 50 additions and 34 deletions

6
package-lock.json generated
View File

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

View File

@ -33,7 +33,7 @@
"@ngrx/router-store": "^5.2.0", "@ngrx/router-store": "^5.2.0",
"@ngrx/store": "^5.2.0", "@ngrx/store": "^5.2.0",
"@ngrx/store-devtools": "^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", "angular-l10n": "^4.1.5",
"angularx-qrcode": "^1.1.0", "angularx-qrcode": "^1.1.0",
"chart.js": "^2.7.2", "chart.js": "^2.7.2",

View File

@ -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> <of-infra-map></of-infra-map>
<of-infra-map></of-infra-map>
<of-infra-map></of-infra-map>
</div> </div>
</div> </div>
</div> </div>

View File

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

View File

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

View File

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

View File

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

View File

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