Fix idle state styling. Reuse anim ms timing.

Author: CodyTolene

src/app/public/ngx-scroll-top.component.html

@@ -3,6 +3,7 @@
     (click)="scrollTop()"
     [class.fade-in]="fadeState() === 'fading-in'"
     [class.fade-out]="fadeState() === 'fading-out'"
+    [class.idle]="fadeState() === 'idle'"
     [style.background-color]="backgroundColor()"
     aria-label="Scroll to top"
   >

src/app/public/ngx-scroll-top.component.scss

@@ -62,28 +62,6 @@ svg.default-content {
   top: 0;
 }
 
-.fade-in {
-  animation: fadeIn 0.2s ease-in forwards;
-}
-
-.fade-out {
-  animation: fadeOut 0.2s ease-out forwards;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+button.idle {
+  opacity: 0;
 }

src/app/public/ngx-scroll-top.component.ts

@@ -8,12 +8,38 @@ import {
   signal,
 } from '@angular/core';
 
+const animationMs = 200;
+
 @Component({
   selector: 'ngx-scroll-top',
   templateUrl: './ngx-scroll-top.component.html',
   styleUrl: './ngx-scroll-top.component.scss',
-  imports: [],
-  standalone: true,
+  styles: [
+    `
+      .fade-in {
+        animation: fadeIn ${animationMs}ms ease-in forwards;
+      }
+      .fade-out {
+        animation: fadeOut ${animationMs}ms ease-out forwards;
+      }
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      @keyframes fadeOut {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+    `,
+  ],
 })
 export class NgxScrollTopComponent implements OnInit, OnDestroy {
   /**
@@ -128,7 +154,7 @@ export class NgxScrollTopComponent implements OnInit, OnDestroy {
   private readonly defaultPadding = '16px';
 
   /** Duration for fade-in/fade-out animations. */
-  private readonly fadeDuration = 200;
+  private readonly fadeDuration = animationMs;
 
   /** Timeout reference for fade completion. */
   private fadeTimeout?: ReturnType<typeof setTimeout>;
@@ -239,7 +265,6 @@ export class NgxScrollTopComponent implements OnInit, OnDestroy {
       // Schedule fade-in with animation frame
       this.animationFrameId = requestAnimationFrame(() => {
         this.fadeState.set('fading-in');
-        this.animationFrameId = undefined;
       });
     }
     // Fade out