feat: add fade in animation after initial load

bluehalo · Jul 25, 2024 · 06e146c · 06e146c
1 parent d9190e2
commit 06e146c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="app-container">
+<div class="app-container" @enter>
 	<site-container>
 		<router-outlet />
 	</site-container>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,3 +1,4 @@
+import { animate, style, transition, trigger } from '@angular/animations';
 import { Component, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
@@ -8,7 +9,15 @@ import { ThemingService } from './core/theming/theming.service';
 	selector: 'app-root',
 	templateUrl: './app.component.html',
 	standalone: true,
-	imports: [SiteContainerComponent, RouterOutlet]
+	imports: [SiteContainerComponent, RouterOutlet],
+	animations: [
+		trigger('enter', [
+			transition(':enter', [
+				style({ opacity: 0 }),
+				animate('200ms ease-in', style({ opacity: 1 }))
+			])
+		])
+	]
 })
 export class AppComponent {
 	private theming = inject(ThemingService);