fix: fadein animation

boris-jenicek · Apr 9, 2024 · 5234215 · 5234215
1 parent 7bb200c
commit 5234215
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/libs/drawer/src/animations/fadein-out-animation.ts b/libs/drawer/src/animations/fadein-out-animation.ts
@@ -19,14 +19,14 @@ export const fadeinOutAnimation: AnimationTriggerMetadata = trigger(
     transition('* => enter', [
       style({ opacity: 0 }),
       group([
-        animate('400ms ease-in', style({ opacity: 1 })),
+        animate('300ms ease-in', style({ opacity: 1 })),
         query('@*', animateChild(), { optional: true }),
       ]),
     ]),
     transition('enter => leave', [
       group([
         query('@*', animateChild(), { optional: true }),
-        animate('400ms ease-out', style({ opacity: 0 })),
+        animate('300ms ease-out', style({ opacity: 0 })),
       ]),
     ]),
   ]

diff --git a/libs/drawer/src/components/drawer-component/drawer.component.ts b/libs/drawer/src/components/drawer-component/drawer.component.ts
@@ -64,7 +64,7 @@ export class DrawerComponent implements AfterViewInit {
       setTimeout(() => {
         this.loaderComponentType = undefined; // Clear loader component
         this.loadComponent(); // Load main component
-      }, 300);
+      }, 400);
     }
   }
 
@@ -74,12 +74,12 @@ export class DrawerComponent implements AfterViewInit {
 
   private loadComponent(): void {
     const componentType = this.loaderComponentType || this.mainComponentType;
+    this.contentAnimationState = 'enter';
     this.helper.loadComponent(
       this.drawerContent,
       this.drawerRemoteControl,
       componentType
     );
-    this.contentAnimationState = 'enter';
   }
 
   onAnimationDone(event: any) {

diff --git a/libs/drawer/src/styles/styles.scss b/libs/drawer/src/styles/styles.scss
@@ -1,25 +1,27 @@
-$z-index-overlay: 9999;
-$z-index-drawer: 10000;
-$overlay-shade: black;
-$drawer-background: white;
-$overlay-backdrop-filter: blur(1px);
-$overlay-background: transparentize($drawer-background, 0.75);
+:root {
+  --drawer-background: #f5f5f5;
+  --drawer-overlay-background: #{transparentize(black, 0.75)};
+  --drawer-overlay-backdrop-filter: blur(1px);
+  --drawer-default-loader-color: #6c757d;
+  --drawer-z-index-overlay: 9999;
+  --drawer-z-index-drawer: 10000;
+}
 
 .ng-vibe-drawer-overlay {
-  backdrop-filter: $overlay-backdrop-filter;
-  background: $overlay-background;
+  backdrop-filter: var(--drawer-overlay-backdrop-filter);
+  background: var(--drawer-overlay-background);
   bottom: 0;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
-  z-index: $z-index-overlay;
+  z-index: var(--drawer-z-index-overlay);
 }
 
 .ng-vibe-drawer-wrapper {
-  background-color: $drawer-background;
+  background-color: var(--drawer-background);
   position: fixed;
-  z-index: $z-index-drawer;
+  z-index: var(--drawer-z-index-drawer);
   overflow: hidden;
 
   .drawer-content {