Skip to content

Instantly share code, notes, and snippets.

@coskuncakir

coskuncakir/1_route.animations.ts

Last active September 12, 2023 13:46
Show Gist options
  • Save coskuncakir/d594995a9a2afdf3a16b1feb6cd1e90a to your computer and use it in GitHub Desktop.
Save coskuncakir/d594995a9a2afdf3a16b1feb6cd1e90a to your computer and use it in GitHub Desktop.
Download ZIP
Angular fade animation for transition between routes.
Raw
1_route.animations.ts
import {
trigger,
animate,
transition,
style,
query
} from '@angular/animations';
export const fadeAnimation = trigger('fadeAnimation', [
transition('* => *', [
query(
':enter',
[
style({
opacity: 0,
position: 'absolute',
height: '100%',
width: '100%'
})
],
{ optional: true }
),
query(
':leave',
// here we apply a style and use the animate function to apply the style over 0.3 seconds
[
style({
opacity: 1,
position: 'absolute',
height: '100%',
width: '100%'
}),
animate('0.3s', style({ opacity: 0 }))
],
{ optional: true }
),
query(
':enter',
[
style({
opacity: 0,
position: 'relative',
height: '100%',
width: '100%'
}),
animate('0.3s', style({ opacity: 1 }))
],
{ optional: true }
)
])
]);
Raw
2_app.component.ts
...
import { fadeAnimation } from './route.animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
animations: [fadeAnimation]
})
...
Raw
3_app.component.html
<div [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment