From d70ad0d3c791c19182a29ed8ce0bfbabbd891b8a Mon Sep 17 00:00:00 2001
From: mustafahlvc <mustafahlvc@gmail.com>
Date: Sat, 19 Aug 2017 16:20:09 +0300
Subject: [PATCH] Fuck.n router animation..

---
 src/app/core/animations.ts                | 52 ++++++++++++++++++++---
 src/app/main/content/content.component.ts | 18 ++++++--
 2 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/src/app/core/animations.ts b/src/app/core/animations.ts
index dfe9a89e..ad096f12 100644
--- a/src/app/core/animations.ts
+++ b/src/app/core/animations.ts
@@ -1,4 +1,6 @@
-import { trigger, state, transition, animate, style } from '@angular/animations';
+import { sequence, trigger, stagger, animate, style, group, query as q, transition, keyframes, animateChild, state } from '@angular/animations';
+
+const query = (s, a, o = {optional: true}) => q(s, a, o);
 
 export class Animations
 {
@@ -55,10 +57,11 @@ export class Animations
     ]);
 
     public static slideInBottom = trigger('slideInBottom', [
-        state('void', style({
-            transform: 'translateY(100%)',
-            display  : 'none'
-        })),
+        state('void',
+            style({
+                transform: 'translateY(100%)',
+                display  : 'none'
+            })),
         state('*', style({
             transform: 'translateY(0)',
             display  : 'flex'
@@ -66,4 +69,43 @@ export class Animations
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
     ]);
+
+    public static routerTransition = trigger('routerTransition', [
+
+        transition('* => *', [
+            query(':enter, :leave', style({
+                position: 'absolute',
+                height  : '100vh'
+            })),
+            query(':enter', style({
+                transform: 'translateY(100%)',
+                opacity  : 0
+            })),
+            sequence([
+                group([
+                    query(':leave', [
+                        style({
+                            transform: 'translateY(0)',
+                            opacity  : 1
+                        }),
+                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                            style({
+                                transform: 'translateY(-100%)',
+                                opacity  : 0
+                            }))
+                    ]),
+                    query(':enter', [
+                        style({transform: 'translateY(100%)'}),
+                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                            style({
+                                transform: 'translateY(0%)',
+                                opacity  : 1
+                            }))
+                    ])
+                ]),
+                query(':leave', animateChild()),
+                query(':enter', animateChild())
+            ])
+        ])
+    ]);
 }
diff --git a/src/app/main/content/content.component.ts b/src/app/main/content/content.component.ts
index 2f85f599..f16e2455 100644
--- a/src/app/main/content/content.component.ts
+++ b/src/app/main/content/content.component.ts
@@ -1,20 +1,30 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostBinding, OnInit } from '@angular/core';
 import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
-import { NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Animations } from '../../core/animations';
 
 @Component({
     selector   : 'fuse-content',
     templateUrl: './content.component.html',
-    styleUrls  : ['./content.component.scss']
+    styleUrls  : ['./content.component.scss'],
+    animations : [Animations.routerTransition]
 })
 export class FuseContentComponent implements OnInit
 {
+    @HostBinding('@routerTransition') routeAnimationState = false;
+
     constructor(
         private router: Router,
+        private activatedRoute: ActivatedRoute,
         private perfectScrollbarDirective: PerfectScrollbarDirective
     )
     {
-
+        this.router.events
+            .filter((event) => event instanceof NavigationEnd)
+            .map(() => this.activatedRoute)
+            .subscribe((event) => {
+                this.routeAnimationState = !this.routeAnimationState;
+            });
     }
 
     ngOnInit()