feat: sub navigation animations

tomastrajan · Jul 25, 2017 · be7a040 · be7a040
1 parent 285ef5d
commit be7a040
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/package.json b/package.json
diff --git a/src/app/core/animations/router.transition.ts b/src/app/core/animations/router.transition.ts
@@ -8,28 +8,30 @@ import {
   stagger
 } from '@angular/animations';
 
+export const ANIMATE_ON_ROUTE_ENTER = 'route-enter-staggered';
+
 export const routerTransition = trigger('routerTransition', [
   transition('* <=> *', [
     query(':enter, :leave',
       style({ position: 'fixed', width: '100%' }),
       { optional: true }),
-    query(':enter .route-enter-staggered',
+    query(':enter .' + ANIMATE_ON_ROUTE_ENTER,
       style({ opacity: 0 }),
       { optional: true }),
     group([
       query(':enter', [
-        style({ transform: 'translateY(-5%)', opacity: 0 }),
+        style({ transform: 'translateY(-3%)', opacity: 0 }),
         animate('0.5s 0.5s ease-in-out',
           style({ transform: 'translateY(0%)', opacity: 1 }))
       ], { optional: true }),
       query(':leave', [
         style({ transform: 'translateY(0%)', opacity: 1 }),
         animate('0.2s ease-in-out',
-          style({ transform: 'translateY(-5%)', opacity: 0 }))
+          style({ transform: 'translateY(-3%)', opacity: 0 }))
       ], { optional: true })
     ]),
-    query(':enter .route-enter-staggered', stagger(100, [
-      style({ transform: 'translateY(10%)', opacity: 0 }),
+    query(':enter .' + ANIMATE_ON_ROUTE_ENTER, stagger(100, [
+      style({ transform: 'translateY(15%)', opacity: 0 }),
       animate('0.5s ease-in-out',
         style({ transform: 'translateY(0%)', opacity: 1 })),
     ]), { optional: true }),

diff --git a/src/app/examples/examples/examples.component.html b/src/app/examples/examples/examples.component.html
@@ -7,4 +7,6 @@
     {{e.label}}
   </a>
 </nav>
-<router-outlet></router-outlet>
+<div [@routerTransition]="o.isActivated && o.activatedRoute.routeConfig.path">
+  <router-outlet #o="outlet"></router-outlet>
+</div>
diff --git a/src/app/examples/examples/examples.component.ts b/src/app/examples/examples/examples.component.ts
@@ -1,9 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
+import { routerTransition } from '@app/core';
+
 @Component({
   selector: 'anms-examples',
   templateUrl: './examples.component.html',
-  styleUrls: ['./examples.component.scss']
+  styleUrls: ['./examples.component.scss'],
+  animations: [routerTransition]
 })
 export class ExamplesComponent implements OnInit {
 

diff --git a/src/app/examples/todos/todos.component.html b/src/app/examples/todos/todos.component.html
@@ -49,7 +49,7 @@ <h2>
           </md-chip>
         </md-chip-list>
       </h2>
-      <md-card *ngFor="let todo of filteredTodos" class="todo">
+      <md-card *ngFor="let todo of filteredTodos" class="todo" [ngClass]="animateOnRouteEnter">
         <md-checkbox class="todo-done" [checked]="todo.done" (change)="onToggleTodo(todo)"></md-checkbox>
         <span class="todo-label" (click)="onToggleTodo(todo)">{{todo.name}}</span>
       </md-card>

diff --git a/src/app/examples/todos/todos.component.ts b/src/app/examples/todos/todos.component.ts
@@ -4,6 +4,8 @@ import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/takeUntil';
 import 'rxjs/add/operator/map';
 
+import { ANIMATE_ON_ROUTE_ENTER } from '@app/core';
+
 import {
   actionAddTodo,
   actionPersistTodos,
@@ -24,6 +26,7 @@ export class TodosComponent implements OnInit, OnDestroy {
 
   private unsubscribe$: Subject<void> = new Subject<void>();
 
+  animateOnRouteEnter = ANIMATE_ON_ROUTE_ENTER;
   todos: any;
   newTodo = '';
 

diff --git a/src/app/static/about/about.component.html b/src/app/static/about/about.component.html
@@ -3,27 +3,27 @@
     <div class="container">
       <h1>Angular ngRx Material Starter</h1>
       <div class="actions">
-        <a md-raised-button color="primary" routerLink="../features"
-           class="route-enter-staggered">
+        <a [ngClass]="animateOnRouteEnter"
+           md-raised-button color="primary" routerLink="../features">
           Check Features
         </a>
         <a md-raised-button color="accent" routerLink="../examples"
-           class="route-enter-staggered">
+           [ngClass]="animateOnRouteEnter">
           Check Examples
         </a>
         <a md-raised-button routerLink="../settings"
-           class="route-enter-staggered">
+           [ngClass]="animateOnRouteEnter">
           Change Theme
         </a>
-        <span class="route-enter-staggered">or</span>
+        <span [ngClass]="animateOnRouteEnter">or</span>
         <a md-raised-button
-           class="route-enter-staggered"
+           [ngClass]="animateOnRouteEnter"
            target="_blank"
            href="https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1">
           <i class="fa fa-medium"></i> Check Blog Post
         </a>
       </div>
-      <div class="get-started route-enter-staggered">
+      <div class="get-started" [ngClass]="animateOnRouteEnter">
         <h2>Getting started</h2>
         <code>git clone
           https://github.com/tomastrajan/angular-ngrx-material-starter.git

diff --git a/src/app/static/about/about.component.ts b/src/app/static/about/about.component.ts
@@ -1,17 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 
+import { ANIMATE_ON_ROUTE_ENTER } from '@app/core';
+
 @Component({
   selector: 'anms-about',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss']
 })
 export class AboutComponent implements OnInit {
 
-  intro = require('../../../assets/intro.jpg');
+  animateOnRouteEnter = ANIMATE_ON_ROUTE_ENTER;
 
   constructor() { }
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
 }
diff --git a/src/app/static/features/features.component.html b/src/app/static/features/features.component.html
@@ -5,7 +5,7 @@ <h1 class="main-heading">Features</h1>
     </div>
   </div>
   <div class="row align-items-end">
-    <div class="col-md-6 col-lg-4 route-enter-staggered">
+    <div  class="col-md-6 col-lg-4" [ngClass]="animateOnRouteEnter">
       <md-card>
         <md-card-title><code>{{versions.angular}}</code>Angular</md-card-title>
         <md-card-subtitle>
@@ -21,7 +21,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4 route-enter-staggered">
+    <div  class="col-md-6 col-lg-4" [ngClass]="animateOnRouteEnter">
       <md-card>
         <md-card-title><code>{{versions.material}}</code>Angular Material</md-card-title>
         <md-card-subtitle>
@@ -37,7 +37,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4 route-enter-staggered">
+    <div  class="col-md-6 col-lg-4" [ngClass]="animateOnRouteEnter">
       <md-card>
         <md-card-title><code>{{versions.angularCli}}</code>Angular Cli</md-card-title>
         <md-card-subtitle>
@@ -53,7 +53,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4 route-enter-staggered">
+    <div  class="col-md-6 col-lg-4" [ngClass]="animateOnRouteEnter">
       <md-card>
         <md-card-title><code>{{versions.ngrx}}</code>ngRx</md-card-title>
         <md-card-subtitle>
@@ -69,7 +69,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4 route-enter-staggered">
+    <div  class="col-md-6 col-lg-4" [ngClass]="animateOnRouteEnter">
       <md-card>
         <md-card-title><code>{{versions.rxjs}}</code>RxJS</md-card-title>
         <md-card-subtitle>
@@ -85,7 +85,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4 route-enter-staggered">
+    <div  class="col-md-6 col-lg-4" [ngClass]="animateOnRouteEnter">
       <md-card>
         <md-card-title><code>{{versions.bootstrap}}</code>Bootstrap</md-card-title>
         <md-card-subtitle>
@@ -101,7 +101,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4 route-enter-staggered">
+    <div  class="col-md-6 col-lg-4" [ngClass]="animateOnRouteEnter">
       <md-card>
         <md-card-title>Themes</md-card-title>
         <md-card-subtitle>Flexible theming support for provided and custom components</md-card-subtitle>
@@ -115,7 +115,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4 route-enter-staggered">
+    <div  class="col-md-6 col-lg-4" [ngClass]="animateOnRouteEnter">
       <md-card>
         <md-card-title>Lazy loading</md-card-title>
         <md-card-subtitle>Faster startup time with lazy loaded feature modules</md-card-subtitle>

diff --git a/src/app/static/features/features.component.ts b/src/app/static/features/features.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 import { environment as env } from '@env/environment';
+import { ANIMATE_ON_ROUTE_ENTER } from '@app/core';
 
 @Component({
   selector: 'anms-features',
@@ -9,10 +10,10 @@ import { environment as env } from '@env/environment';
 })
 export class FeaturesComponent implements OnInit {
 
+  animateOnRouteEnter = ANIMATE_ON_ROUTE_ENTER;
   versions = env.versions;
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
   openLink(link: string) {
     window.open(link, '_blank');