From b50a9f56ed3879de924d0b45de0b4b7334a4ba89 Mon Sep 17 00:00:00 2001 From: Zak Timson Date: Fri, 16 Nov 2018 11:24:57 -0500 Subject: [PATCH] Fixed all animations --- src/app/animations.ts | 16 +++++++++++++++- src/app/app.component.html | 2 +- src/app/app.component.ts | 20 +++++++++++--------- src/app/login/login.component.html | 6 +++--- src/app/login/login.component.ts | 18 +++++++++++++----- 5 files changed, 43 insertions(+), 19 deletions(-) diff --git a/src/app/animations.ts b/src/app/animations.ts index d108b18..c175d40 100644 --- a/src/app/animations.ts +++ b/src/app/animations.ts @@ -6,6 +6,13 @@ import { query, group } from '@angular/animations'; +export const collapseUp = trigger('collapseUp', [ + transition('* => void', [ + style({opacity: 1, transform: 'translateY(0%)'}), + animate('0.5s', style({opacity: 0, transform: 'translateY(-100%)'})) + ]) +]); + export const expandDown = trigger('expandDown', [ transition('void => *', [ style({opacity: 0, transform: 'translateY(-100%)'}), @@ -13,13 +20,20 @@ export const expandDown = trigger('expandDown', [ ]) ]); -export const fade = trigger('fade', [ +export const fadeIn = trigger('fadeIn', [ transition('void => *', [ style({opacity: 0}), animate('0.5s ease-in-out', style({opacity: 1})) ]) ]); +export const fadeOut = trigger('fadeOut', [ + transition('* => void', [ + style({opacity: 1}), + animate('0.5s ease-in-out', style({opacity: 0})) + ]) +]); + export const routerTransition = trigger('routerTransition', [ transition('* <=> *', [ query(':enter, :leave', style({position: 'fixed', width: '100%'}), {optional: true}), diff --git a/src/app/app.component.html b/src/app/app.component.html index 9c07738..a722f06 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@ - + menu diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c9be439..7430a83 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,7 +2,7 @@ import {Component} from '@angular/core'; import {BatteryService} from './battery/battery.service'; import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout'; import {environment} from '../environments/environment'; -import {expandDown, routerTransition} from './animations'; +import {collapseUp, expandDown, routerTransition} from './animations'; import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; import {filter} from 'rxjs/operators'; import {WeatherService} from './weather/weather.service'; @@ -11,13 +11,14 @@ import {firebaseApp} from './app.module'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - animations: [expandDown, routerTransition] + animations: [collapseUp, expandDown, routerTransition] }) export class AppComponent { - hide = false; - mobile = true; - open = false; - environment = environment; + hide = false; // Hide nav + mobile = true; // Mobile or desktop size + noTransition = false; // Stop router transitions + open = false; // Side nav open + environment = environment; // Environment ref constructor(private router: Router, public batteryService: BatteryService, public weatherService: WeatherService, route: ActivatedRoute, breakpointObserver: BreakpointObserver) { router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => { @@ -32,12 +33,13 @@ export class AppComponent { } async logout() { + this.noTransition = true; await firebaseApp.auth().signOut(); - return this.router.navigate(['/login']) + return this.router.navigate(['/login']).then(() => this.noTransition = false); } getState(outlet) { - if(!outlet.isActivated) return ''; - return outlet.activatedRouteData.noAnimation ? '' : outlet.activatedRoute; + if(!outlet.isActivated || !!outlet.activatedRouteData.noAnimation || this.noTransition) return ''; + return outlet.activatedRoute; } } diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index a270f57..5a8959f 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,6 +1,6 @@ -
+
-
+

Home Front

@@ -8,6 +8,6 @@
-
+
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index e4efe05..c3cc20f 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -2,22 +2,31 @@ import {Component, NgZone, OnInit} from '@angular/core'; import {firebaseApp} from '../app.module'; import {Router} from '@angular/router'; import * as firebase from 'firebase'; -import {expandDown, fade} from '../animations'; +import {expandDown, fadeIn, fadeOut} from '../animations'; @Component({ selector: 'app-login', templateUrl: './login.component.html', - animations: [expandDown, fade] + animations: [expandDown, fadeIn, fadeOut] }) export class LoginComponent implements OnInit { + animate = false; + show = true; loading = false; - constructor(private router: Router, private ngZone: NgZone) { } + constructor(private ngZone: NgZone, public router: Router) { } ngOnInit() { firebaseApp.auth().onAuthStateChanged(user => { - if(!!user) this.ngZone.run(() => this.router.navigate(['/dashboard'])); + if(!!user) { + this.show = false; + setTimeout(() => { + this.ngZone.runTask(() => this.router.navigate(['/dashboard'])); + }, 800); + } }); + + setTimeout(() => this.animate = true, 1000); } async login() { @@ -25,6 +34,5 @@ export class LoginComponent implements OnInit { await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL); await firebaseApp.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider()); this.loading = false; - this.router.navigate(['/dashboard']); } }