From 71d139f177c62c3cc800cf7b73d9dee2a0e10cbd Mon Sep 17 00:00:00 2001 From: Tykayn Date: Tue, 18 May 2021 11:21:40 +0200 Subject: [PATCH] start sliding transition between pages --- src/app/app.component.html | 4 +- src/app/app.component.ts | 8 +++- .../components/header/header.component.html | 26 ++++-------- .../components/header/header.component.scss | 5 +++ .../administration-routing.module.ts | 2 +- .../administration.component.ts | 2 + src/app/routes-framadate.ts | 3 +- src/app/shared/animations/main.ts | 40 +++++++++++++++++++ .../language-selector.component.html | 2 +- src/styles/partials/_forms.scss | 5 ++- 10 files changed, 72 insertions(+), 25 deletions(-) create mode 100644 src/app/shared/animations/main.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 8f398fd4..6b23958e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -7,8 +7,8 @@
-
- +
+

menu diff --git a/src/app/app.component.ts b/src/app/app.component.ts index fbc366c5..779952c4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,12 +6,14 @@ import { environment } from '../environments/environment'; import { Theme } from './core/enums/theme.enum'; import { LanguageService } from './core/services/language.service'; import { ThemeService } from './core/services/theme.service'; -import { NavigationEnd, Router } from '@angular/router'; +import { NavigationEnd, Router, RouterOutlet } from '@angular/router'; +import { slideInAnimation } from './shared/animations/main'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], + animations: [slideInAnimation], }) export class AppComponent implements OnInit, OnDestroy { public appTitle: string = environment.appTitle; @@ -69,4 +71,8 @@ export class AppComponent implements OnInit, OnDestroy { public toggleSidebar(status: boolean): void { this.isSidebarOpened = status === true; } + + prepareRoute(outlet: RouterOutlet) { + return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation; + } } diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index e8f2536b..14b02ab4 100644 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -9,17 +9,14 @@
- - -
- {{ 'config.title' | translate }} -
- + + + +
+ {{ 'config.title' | translate }} +
+ +
@@ -88,13 +85,6 @@ aujourdhui-ou-demain - - - citron - - sans pass - - import('./features/user-profile/user-profile.module').then((m) => m.UserProfileModule), }, { path: 'administration', + data: { animation: 'AdminPage' }, loadChildren: () => import('./features/administration/administration.module').then((m) => m.AdministrationModule), // resolve: { poll: PollService }, diff --git a/src/app/shared/animations/main.ts b/src/app/shared/animations/main.ts new file mode 100644 index 00000000..fac13b78 --- /dev/null +++ b/src/app/shared/animations/main.ts @@ -0,0 +1,40 @@ +import { animate, animateChild, group, query, style, transition, trigger } from '@angular/animations'; + +export const slideInAnimation = trigger('routeAnimations', [ + transition('HomePage <=> AdminPage', [ + style({ position: 'relative' }), + query(':enter, :leave', [ + style({ + position: 'absolute', + top: 0, + left: 0, + width: '100%', + }), + ]), + query(':enter', [style({ left: '-100%' })]), + query(':leave', animateChild()), + group([ + query(':leave', [animate('300ms ease-out', style({ left: '100%' }))]), + query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]), + ]), + query(':enter', animateChild()), + ]), + transition('* <=> FilterPage', [ + style({ position: 'relative' }), + query(':enter, :leave', [ + style({ + position: 'absolute', + top: 0, + left: 0, + width: '100%', + }), + ]), + query(':enter', [style({ left: '-100%' })]), + query(':leave', animateChild()), + group([ + query(':leave', [animate('200ms ease-out', style({ left: '100%' }))]), + query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]), + ]), + query(':enter', animateChild()), + ]), +]); diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.html b/src/app/shared/components/selectors/language-selector/language-selector.component.html index bd02c438..99337c7d 100644 --- a/src/app/shared/components/selectors/language-selector/language-selector.component.html +++ b/src/app/shared/components/selectors/language-selector/language-selector.component.html @@ -1,5 +1,5 @@
- langue + langue