animations for various routes

src/popup2/app-routing.animations.ts

@@ -8,7 +8,13 @@ import {
 } from '@angular/animations';
 
 const queryShown = query(':enter, :leave', [
-    style({ position: 'fixed', width: '100%', height: '100%' })
+    style({ position: 'fixed', width: '100%', height: '100%' }),
+], { optional: true });
+
+// ref: https://github.com/angular/angular/issues/15477
+const queryChildRoute = query('router-outlet ~ *', [
+    style({}),
+    animate(1, style({})),
 ], { optional: true });
 
 const speed = '0.4s';
@@ -33,6 +39,7 @@ const inSlideLeft = [
     group([
         queryTranslateX('enter', 100, 0),
         queryTranslateX('leave', 0, -100),
+        queryChildRoute,
     ]),
 ];
 
@@ -49,6 +56,7 @@ const inSlideUp = [
     group([
         queryTranslateY('enter', 100, 0, 1010),
         queryTranslateY('leave', 0, 0),
+        queryChildRoute,
     ]),
 ];
 
@@ -65,6 +73,7 @@ const inSlideDown = [
     group([
         queryTranslateY('enter', -100, 0, 1010),
         queryTranslateY('leave', 0, 0),
+        queryChildRoute,
     ]),
 ];
 
@@ -82,4 +91,16 @@ export const routerTransition = trigger('routerTransition', [
 
     transition('login => hint', inSlideUp),
     transition('hint => login', outSlideDown),
+
+    transition('tabs => ciphers', inSlideLeft),
+    transition('ciphers => tabs', outSlideRight),
+
+    transition('tabs => view-cipher, ciphers => view-cipher', inSlideUp),
+    transition('view-cipher => tabs, view-cipher => ciphers', outSlideDown),
+
+    transition('view-cipher => edit-cipher', inSlideUp),
+    transition('edit-cipher => view-cipher', outSlideDown),
+
+    transition('tabs => add-cipher, ciphers => add-cipher', inSlideUp),
+    transition('add-cipher => tabs, add-cipher => ciphers', outSlideDown),
 ]);

src/popup2/app-routing.module.ts

@@ -26,29 +26,32 @@ const routes: Routes = [
     { path: 'vault', redirectTo: '/tabs/vault', pathMatch: 'full' },
     { path: 'home', component: HomeComponent, data: { state: 'home' } },
     { path: 'login', component: LoginComponent, data: { state: 'login' } },
-    { path: 'lock', component: LockComponent },
-    { path: '2fa', component: TwoFactorComponent },
-    { path: '2fa-options', component: TwoFactorOptionsComponent },
-    { path: 'register', component: RegisterComponent },
+    { path: 'lock', component: LockComponent, data: { state: 'lock' } },
+    { path: '2fa', component: TwoFactorComponent, data: { state: '2fa' } },
+    { path: '2fa-options', component: TwoFactorOptionsComponent, data: { state: '2fa-options' } },
+    { path: 'register', component: RegisterComponent, data: { state: 'register' } },
     { path: 'hint', component: HintComponent, data: { state: 'hint' } },
-    { path: 'environment', component: EnvironmentComponent },
-    { path: 'ciphers', component: CiphersComponent },
-    { path: 'view-cipher', component: ViewComponent },
-    { path: 'add-cipher', component: AddEditComponent },
-    { path: 'edit-cipher', component: AddEditComponent },
+    { path: 'environment', component: EnvironmentComponent, data: { state: 'environment' } },
+    { path: 'ciphers', component: CiphersComponent, data: { state: 'ciphers' } },
+    { path: 'view-cipher', component: ViewComponent, data: { state: 'view-cipher' } },
+    { path: 'add-cipher', component: AddEditComponent, data: { state: 'add-cipher' } },
+    { path: 'edit-cipher', component: AddEditComponent, data: { state: 'edit-cipher' } },
     {
         path: 'tabs', component: TabsComponent,
+        data: { state: 'tabs' },
         children: [
             { path: '', redirectTo: '/tabs/vault', pathMatch: 'full' },
             {
                 path: 'current',
                 component: CurrentTabComponent,
                 canActivate: [AuthGuardService],
+                data: { state: 'tabs_current' },
             },
             {
                 path: 'vault',
                 component: GroupingsComponent,
                 canActivate: [AuthGuardService],
+                data: { state: 'tabs_vault' },
             }
         ]
     }

src/popup2/app.component.ts

@@ -8,7 +8,10 @@ import {
     Component,
     OnInit,
 } from '@angular/core';
-import { Router } from '@angular/router';
+import {
+    Router,
+    RouterOutlet,
+} from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
@@ -79,7 +82,7 @@ export class AppComponent implements OnInit {
         BrowserApi.messageListener((window as any).bitwardenPopupMainMessageListener);
     }
 
-    getState(outlet: any) {
+    getState(outlet: RouterOutlet) {
         return outlet.activatedRouteData.state;
     }