router animation
This commit is contained in:
parent
94ae1ef451
commit
c652f228a6
6
package-lock.json
generated
6
package-lock.json
generated
@ -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",
|
||||||
|
@ -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",
|
||||||
|
@ -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>
|
||||||
|
@ -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 }),
|
||||||
|
])
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,2 +1 @@
|
|||||||
container로 교체
|
<of-noauth-list-container></of-noauth-list-container>
|
||||||
<!-- <of-noauth-list></of-noauth-list> -->
|
|
@ -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;
|
|
||||||
}
|
|
Loading…
x
Reference in New Issue
Block a user