route transition animations

src/popup2/app-routing.animations.ts

@@ -0,0 +1,85 @@
+import {
+    trigger,
+    animate,
+    style,
+    group,
+    query,
+    transition,
+} from '@angular/animations';
+
+const queryShown = query(':enter, :leave', [
+    style({ position: 'fixed', width: '100%', height: '100%' })
+], { optional: true });
+
+const speed = '0.5s';
+
+export function queryTranslate(direction: string, axis: string, from: number, to: number, zIndex: number = 1000) {
+    return query(':' + direction, [
+        style({ transform: 'translate' + axis + '(' + from + '%)', zIndex: zIndex, boxShadow: '0 3px 2px -2px gray' }),
+        animate(speed + ' ease-in-out', style({ transform: 'translate' + axis + '(' + to + '%)' })),
+    ], { optional: true });
+}
+
+export function queryTranslateX(direction: string, from: number, to: number, zIndex: number = 1000) {
+    return queryTranslate(direction, 'X', from, to, zIndex);
+}
+
+export function queryTranslateY(direction: string, from: number, to: number, zIndex: number = 1000) {
+    return queryTranslate(direction, 'Y', from, to, zIndex);
+}
+
+const inSlideLeft = [
+    queryShown,
+    group([
+        queryTranslateX('enter', 100, 0),
+        queryTranslateX('leave', 0, -100),
+    ]),
+];
+
+const outSlideRight = [
+    queryShown,
+    group([
+        queryTranslateX('enter', -100, 0),
+        queryTranslateX('leave', 0, 100),
+    ]),
+];
+
+const inSlideUp = [
+    queryShown,
+    group([
+        queryTranslateY('enter', 100, 0, 1010),
+        queryTranslateY('leave', 0, 0),
+    ]),
+];
+
+const outSlideDown = [
+    queryShown,
+    group([
+        queryTranslateY('enter', 0, 0),
+        queryTranslateY('leave', 0, 100, 1010),
+    ]),
+];
+
+const inSlideDown = [
+    queryShown,
+    group([
+        queryTranslateY('enter', -100, 0, 1010),
+        queryTranslateY('leave', 0, 0),
+    ]),
+];
+
+const outSlideUp = [
+    queryShown,
+    group([
+        queryTranslateY('enter', 0, 0),
+        queryTranslateY('leave', 0, -100, 1010),
+    ]),
+];
+
+export const routerTransition = trigger('routerTransition', [
+    transition('home => login', inSlideLeft),
+    transition('login => home', outSlideRight),
+
+    transition('login => hint', inSlideUp),
+    transition('hint => login', outSlideDown),
+]);

src/popup2/app-routing.module.ts

@@ -24,13 +24,13 @@ import { ViewComponent } from './vault/view.component';
 const routes: Routes = [
     { path: '', redirectTo: '/tabs/current', pathMatch: 'full' },
     { path: 'vault', redirectTo: '/tabs/vault', pathMatch: 'full' },
-    { path: 'home', component: HomeComponent },
-    { path: 'login', component: LoginComponent },
+    { 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: 'hint', component: HintComponent },
+    { path: 'hint', component: HintComponent, data: { state: 'hint' } },
     { path: 'environment', component: EnvironmentComponent },
     { path: 'ciphers', component: CiphersComponent },
     { path: 'view-cipher', component: ViewComponent },

src/popup2/app.component.ts

@@ -23,12 +23,17 @@ import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { ConstantsService } from 'jslib/services/constants.service';
 
+import { routerTransition } from './app-routing.animations';
+
 @Component({
     selector: 'app-root',
     styles: [],
+    animations: [routerTransition],
     template: `
         <toaster-container [toasterconfig]="toasterConfig"></toaster-container>
-        <router-outlet></router-outlet>`,
+        <main [@routerTransition]="getState(o)">
+            <router-outlet #o="outlet"></router-outlet>
+        </main>`,
 })
 export class AppComponent implements OnInit {
     toasterConfig: ToasterConfig = new ToasterConfig({
@@ -74,6 +79,10 @@ export class AppComponent implements OnInit {
         BrowserApi.messageListener((window as any).bitwardenPopupMainMessageListener);
     }
 
+    getState(outlet: any) {
+        return outlet.activatedRouteData.state;
+    }
+
     private async recordActivity() {
         const now = (new Date()).getTime();
         if (this.lastActivity != null && now - this.lastActivity < 250) {

src/scss/base.scss

@@ -220,6 +220,7 @@ content {
     left: 0;
     right: 0;
     overflow: auto;
+    background-color: $background-color;
 
     &.no-header {
         top: 0;