Router Animation in Angular 2/4/5

In this article we discuss on how to set animation between two routes in Angular 2/4/5.

For setup angular animation we need to import some functions like trigger, state, animate, transition, style from the angular default package ‘@angular/animations’.


First we need to import “BrowserAnimationsModule” in our “app.module.ts”.


import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        ...
        BrowserAnimationsModule,
        ......
    ],
    ...
})
export class AppModule { }

After adding in the “app.module.ts”. Let’s create one common component for the animation so we call in any where in the code. Let’s create folder in the app called “animations”. Lets’s create on file called “fadein.ts”.


// let's import animation functions.
import { trigger, state, animate, transition, style } from '@angular/animations';
 
export const fadeInAnimation =
    // trigger name where we want to use.
    trigger('fadeInAnimation', [

        transition(':enter', [
            style({ opacity: 0 }),
            animate('.3s', style({ opacity: 1 }))
        ]),
    ]);



Now where we want to use fade-in animation just import these file like below example.


import { Component } from '@angular/core';
// import fade in animation
import { fadeInAnimation } from '../animations/fadein';
 
@Component({
    templateUrl: 'dashboard.component.html',
    animations: [fadeInAnimation],

    host: { '[@fadeInAnimation]': '' }
})
 
export class DashboardComponent {
.........
}

Just import your animation in component where you want to add. Then in component we need to assign in animation.
Assign animation to rout we need to assign animation to host in component like ” host: { ‘[@fadeInAnimation]’: ” }”. Using “transition” you can easily implement animation effect using CSS properties.

Spread the love
  • 16
  •  
  •  
  •  
  • 1
  • 1
  •  
  •