demo(app): added animations to the demo app

Author: AnthonyNahas

demo/package-lock.json

@@ -18,16 +18,16 @@
  },
  "private": true,
  "dependencies": {
- "@angular/animations": "^6.1.1",
- "@angular/common": "^6.1.1",
- "@angular/compiler": "^6.1.1",
- "@angular/core": "^6.1.1",
- "@angular/forms": "^6.1.1",
- "@angular/http": "^6.1.1",
- "@angular/platform-browser": "^6.1.1",
- "@angular/platform-browser-dynamic": "^6.1.1",
- "@angular/platform-server": "^6.1.1",
- "@angular/router": "^6.1.1",
+ "@angular/animations": "^6.1.2",
+ "@angular/common": "^6.1.2",
+ "@angular/compiler": "^6.1.2",
+ "@angular/core": "^6.1.2",
+ "@angular/forms": "^6.1.2",
+ "@angular/http": "^6.1.2",
+ "@angular/platform-browser": "^6.1.2",
+ "@angular/platform-browser-dynamic": "^6.1.2",
+ "@angular/platform-server": "^6.1.2",
+ "@angular/router": "^6.1.2",
  "@ng-bootstrap/ng-bootstrap": "^2.2.2",
  "@stackblitz/sdk": "^1.2.0",
  "bootstrap": "^4.1.3",
@@ -39,19 +39,19 @@
  },
  "devDependencies": {
  "@angular-devkit/build-angular": "~0.6.0",
- "@angular/cli": "^6.1.1",
- "@angular/compiler-cli": "^6.1.1",
- "@angular/language-service": "^6.1.1",
+ "@angular/cli": "^6.1.3",
+ "@angular/compiler-cli": "^6.1.2",
+ "@angular/language-service": "^6.1.2",
  "@angularclass/hmr": "~2.1.3",
  "@compodoc/gulp-compodoc": "^0.0.9",
  "@nguniversal/common": "^6.0.0",
  "@nguniversal/express-engine": "^6.0.0",
  "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
  "@types/jest": "^23.3.1",
- "@types/node": "^10.5.6",
+ "@types/node": "^10.5.8",
  "angular-cli-ghpages": "0.5.2",
  "ansi-colors": "^2.0.5",
- "codelyzer": "^4.4.2",
+ "codelyzer": "^4.4.3",
  "commitplease": "3.2.0",
  "conventional-github-releaser": "2.0.2",
  "del": "3.0.0",
@@ -65,15 +65,15 @@
  "gulp-file": "0.4.0",
  "gulp-git": "^2.8.0",
  "gulp-hub": "0.8.0",
- "jest": "^23.4.2",
+ "jest": "^23.5.0",
  "jest-preset-angular": "^5.2.3",
  "lodash": "^4.17.10",
  "protractor": "~5.3.0",
  "reflect-metadata": "~0.1.10",
  "run-sequence": "2.2.1",
- "travis-status": "^3.0.0",
+ "travis-status": "^3.0.1",
  "ts-loader": "~4.4.2",
- "ts-node": "~7.0.0",
+ "ts-node": "^7.0.1",
  "tslint": "~5.9.1",
  "typescript": "~2.7.2",
  "webpack-cli": "^3.1.0",

demo/package.json

@@ -1,14 +1,44 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 
+import {sequence, trigger, stagger, animate, style, group, query as q, transition, keyframes, animateChild} from '@angular/animations';
+
+const query = (s, a, o = {optional: true}) => q(s, a, o);
+
+
+export const routerTransition = trigger('routerTransition', [
+ transition('* <=> *', [
+ query(':enter, :leave', style({position: 'fixed', width: '100%'})
+ , {optional: true}),
+ query('.block', style({opacity: 0})
+ , {optional: true}),
+ group([
+ query(':enter', [
+ style({transform: 'translateX(100%)'}),
+ animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
+ ], {optional: true}),
+ query(':leave', [
+ style({transform: 'translateX(0%)'}),
+ animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
+ ], {optional: true}),
+ ]),
+ query(':enter .block', stagger(400, [
+ style({transform: 'translateY(100px)'}),
+ animate('1s ease-in-out', style({transform: 'translateY(0px)', opacity: 1})),
+ ]), {optional: true}),
+ ])
+])
+
 const routes: Routes = [
  {
  path: '',
  redirectTo: 'home',
+ data: {state: 'home'},
  pathMatch: 'full'
  },
  {
  path: 'getting-started',
+ data: {state: 'getting-started'},
  loadChildren: 'app/getting-started/getting-started.module#GettingStartedModule'
  }
 ];

demo/src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 <app-header></app-header>
-<div>
- <router-outlet></router-outlet>
-</div>
+<main [@routerTransition]="getState(o)">
+ <router-outlet #o="outlet"></router-outlet>
+</main>
 <app-footer></app-footer>

demo/src/app/app.component.html

@@ -2,11 +2,13 @@ import {Component, Inject, PLATFORM_ID} from '@angular/core';
 import {NavigationEnd, Router, RouterEvent} from '@angular/router';
 import {isPlatformBrowser} from '@angular/common';
 import {filter} from 'rxjs/operators';
+import {routerTransition} from './app-routing.module';
 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
+ styleUrls: ['./app.component.scss'],
+ animations: [routerTransition],
 })
 export class AppComponent {
 
@@ -20,4 +22,8 @@ export class AppComponent {
  }
  });
  }
+
+ getState(outlet) {
+ return outlet.activatedRouteData.state;
+ }
 }

demo/src/app/app.component.ts

@@ -10,6 +10,7 @@ import {AppComponent} from './app.component';
 import {NgbAuthFirebaseUIModule} from '@firebaseui/ng-bootstrap';
 import {HttpClientModule} from '@angular/common/http';
 import {MarkdownModule} from 'ngx-markdown';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 @NgModule({
  declarations: [
@@ -31,6 +32,7 @@ import {MarkdownModule} from 'ngx-markdown';
  MarkdownModule.forRoot(),
  TransferHttpCacheModule,
  FormsModule,
+ BrowserAnimationsModule,
  HttpClientModule,
  AppRoutingModule,
  AppSharedModule,

demo/src/app/app.module.ts

@@ -1,11 +1,29 @@
 import {Component, OnInit} from '@angular/core';
 import {Title} from '@angular/platform-browser';
 import sdk from '@stackblitz/sdk';
+import {animate, query, stagger, style, transition, trigger} from '@angular/animations';
+
+export const homeTransition = trigger('homeTransition', [
+ transition(':enter', [
+ query('.block', style({opacity: 0})),
+ query('.block', stagger(300, [
+ style({transform: 'translateY(100px)'}),
+ animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(0px)', opacity: 1})),
+ ])),
+ ]),
+ transition(':leave', [
+ query('.block', stagger(300, [
+ style({transform: 'translateY(0px)', opacity: 1}),
+ animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(100px)', opacity: 0})),
+ ])),
+ ])
+]);
 
 @Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
- styleUrls: ['./home.component.scss']
+ styleUrls: ['./home.component.scss'],
+ animations: [homeTransition],
 })
 export class HomeComponent implements OnInit {
 

demo/src/app/home/home.component.ts

@@ -1,3 +1,7 @@
 .navbar {
  background: hsla(0, 0%, 100%, .95)
 }
+
+.host {
+ display: block;
+}

demo/src/app/shared/header/header.component.scss

@@ -33,6 +33,20 @@
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+ <!-- Global site tag (gtag.js) - Google Analytics -->
+ <script async src="https://www.googletagmanager.com/gtag/js?id=UA-114342493-9"></script>
+ <script>
+ window.dataLayer = window.dataLayer || [];
+
+ function gtag() {
+ dataLayer.push(arguments);
+ }
+
+ gtag('js', new Date());
+
+ gtag('config', 'UA-114342493-9');
+ </script>
 </head>
 
 <body>