Skip to content

Commit

Permalink
feat: add fade in animation after initial load
Browse files Browse the repository at this point in the history
  • Loading branch information
jrassa committed Jul 30, 2024
1 parent 10810b0 commit 1b86819
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="app-container">
<div class="app-container" @enter>
<site-container>
<router-outlet />
</site-container>
Expand Down
4 changes: 3 additions & 1 deletion src/app/app.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { signal } from '@angular/core';
import { TestBed, waitForAsync } from '@angular/core/testing';
import { provideNoopAnimations } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { provideCdkDialog } from './common/dialog';
Expand All @@ -18,7 +19,8 @@ describe('AppComponent', () => {
provideSession(),
provideCdkDialog(),
provideHttpClient(),
provideHttpClientTesting()
provideHttpClientTesting(),
provideNoopAnimations()
]
}).compileComponents();
});
Expand Down
11 changes: 10 additions & 1 deletion src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';

Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { ApplicationConfig } from '@angular/core';
import { provideAnimations, provideNoopAnimations } from '@angular/platform-browser/animations';
import {
TitleStrategy,
Expand Down

0 comments on commit 1b86819

Please sign in to comment.