Currently, I have two components with a smooth fade in/out animation that triggers when there is a route change. Alongside this, there is an external background image that gracefully fades in from a dark background upon page load, all managed through CSS.
app.component.html
<div class="bg"></div>
<div class="bgImage"></div>
<div class="main" [@fadeAnimation]="getDepth(myOutlet)">
<router-outlet #myOutlet="outlet"></router-outlet>
</div>
app.component.ts
import { Component } from '@angular/core';
import { fadeAnimation } from './fade.animation';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
, animations: [fadeAnimation]
})
export class AppComponent {
title = 'app';
getDepth(outlet){
return outlet.activatedRouteData['depth'];
}
}
My next goal is to implement a blur/unblur effect on the background image when there is a route change. Below is the animation service without the blur logic:
fade.animation.ts
import { trigger, animate, transition, style, query } from '@angular/animations';
export const fadeAnimation =
trigger('fadeAnimation', [
transition( '1 => 2', [
query(':enter',
[
style({ opacity: 0 })
],
{ optional: true }),
// query('.bgImage',
// [
// style({ filter: 'blur(0px)' }),
// animate('1s ease-in-out', style({ filter: 'blur(5px)' }))
// ],
// { optional: true }
// ),
query(':leave',
[
style({ opacity: 1 }),
animate('0.25s ease-in-out', style({ opacity: 0 }))
],
{ optional: true }),
query(':enter',
[
style({ opacity: 0 }),
animate('0.25s ease-in-out', style({ opacity: 1 }))
],
{ optional: true })
]),
transition( '2 => 1', [
query(':enter',
[
style({ opacity: 0 })
],
{ optional: true }),
// query('.bgImage',
// [
// style({ filter: 'blur(5px)' }),
// animate('1s ease-in-out', style({ filter: 'blur(0px)' }))
// ],
// { optional: true }
// ),
query(':leave',
[
style({ opacity: 1 }),
animate('0.25s ease-in-out', style({ opacity: 0 }))
],
{ optional: true }),
query(':enter',
[
style({ opacity: 0 }),
animate('0.25s ease-in-out', style({ opacity: 1 }))
],
{ optional: true })
])
]);