Fixed all animations

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}),

src/app/app.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar *ngIf="!hide" [@expandDown]="!hide" class="bg-primary">
+<mat-toolbar *ngIf="!hide" [@collapseUp]="!hide" [@expandDown]="!hide" class="bg-primary">
     <mat-icon *ngIf="mobile" class="mr-2" (click)="open = !open">menu</mat-icon>
     <img src="assets/icon.png" class="mr-2" height="24px" width="auto">
     <span>

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;
     }
 }

src/app/login/login.component.html

@@ -1,6 +1,6 @@
-<div *ngIf="loading" [@fade]="true" style="position: fixed; z-index: 1000; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5);"></div>
+<div *ngIf="loading" [@fadeIn]="true" style="position: fixed; z-index: 1000; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5);"></div>
 
-<div class="center">
+<div class="center" *ngIf="show" [@fadeOut]="true">
     <div class="text-center">
         <h1 class="d-inline text-white">Home Front</h1>
     </div>
@@ -8,6 +8,6 @@
         <img src="assets/icon-white.png" width="275px" height="auto">
     </div>
 </div>
-<div class="off-center" [@expandDown]="true">
+<div class="off-center" *ngIf="show" [@fadeOut]="true" [@expandDown]="animate">
     <button mat-stroked-button class="mt-5" style="width: 150px" (click)="login()" [disabled]="loading">Login With Google</button>
 </div>

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']);
     }
 }