Hello friends, This is my tutorial on Angular.
In this tutorial ,you will learn about Angular router transition animation.
Follow these steps to create animation in angular.
First You need to enable the animations module by importing BrowserAnimationsModule .
Write below code in your app.module.ts file
Write below code in your app.module.ts file
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Next you need to create animation.ts file and write below code .
Next you need to create animation.ts file and write below code .
import {
animate,
query,
style,
transition,
trigger,
group,
} from '@angular/animations';
export function routerAnimation() {
return trigger('routerAnimation', [
// One time initial load. Move page from left -100% to 0%
transition('-1 => *', [
query(':enter', [
style({
position: 'fixed',
width: '100%',
transform: 'translateX(-100%)',
}),
animate(
'500ms ease',
style({
opacity: 1,
transform: 'translateX(0%)',
}),
),
]),
]),
// Previous, slide left to right to show left page
transition(':decrement', [
// set new page X location to be -100%
query(
':enter',
style({
position: 'fixed',
width: '100%',
transform: 'translateX(-100%)',
}),
),
group([
// slide existing page from 0% to 100% to the right
query(
':leave',
animate(
'500ms ease',
style({
position: 'fixed',
width: '100%',
transform: 'translateX(100%)',
}),
),
),
// slide new page from -100% to 0% to the right
query(
':enter',
animate(
'500ms ease',
style({
opacity: 1,
transform: 'translateX(0%)',
}),
),
),
]),
]),
// Next, slide right to left to show right page
transition(':increment', [
// set new page X location to be 100%
query(
':enter',
style({
position: 'fixed',
width: '100%',
transform: 'translateX(100%)',
}),
),
group([
// slide existing page from 0% to -100% to the left
query(
':leave',
animate(
'500ms ease',
style({
position: 'fixed',
width: '100%',
transform: 'translateX(-100%)',
}),
),
),
// slide new page from 100% to 0% to the left
query(
':enter',
animate(
'500ms ease',
style({
opacity: 1,
transform: 'translateX(0%)',
}),
),
),
]),
]),
]);
}
Next in your app-routing.module.ts file,write below code where routes define.
For Example:
{ path: 'abc', component: AbcComponent, data: { num: 1 } }
{ path: 'test', component: TestComponent, data: { num: 2 } }
Next in your app.component.ts file, Import routerAnimation file and RouterOutlet.
you need to write below code,
import { routerAnimation } from './common/animations';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [routerAnimation()],
})
export class AppComponent {
constructor() {}
public getRouteAnimation(outlet: RouterOutlet) {
const res =
outlet.activatedRouteData.num === undefined
? -1
: outlet.activatedRouteData.num;
return res;
}
}
And then in app.component.html file . you need to write below code,
<div class="navbar">
<a [routerLink]="['abc']">Abc</a>
<a [routerLink]="['test']">Test</a>
</div>
<div class="content" [@routerAnimation]="getRouteAnimation(router)">
<router-outlet #router="outlet"></router-outlet>
</div>
I hope You like this tutorial.
Thanks For Reading.
Thank you Faisal for the information.
ReplyDelete