Angular 2 Series Animation-Routing Transition Animation


1. Introduce in app.mudule.ts:

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

And add imports in @NgModule:

  imports: [BrowserAnimationsModule],

2. Create a file definition called animations. ts for writing transit animations

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from'@angular/core';
// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
// Animation trigger name
trigger('routeAnimation', [
            opacity: 1,
            transform: 'translateX(0)'
    transition(':enter', [
            opacity: 0,
            transform: 'translateX(-100%)'
        animate('0.2s ease-in')
    transition(':leave', [
        animate('0.5s ease-out', style({
            opacity: 0,
            transform: 'translateY(100%)'

3. Page operations that need to add transit animation

Introduce import {HostBinding} from'@angular/core'; (If you have introduced HostBinding directly, just add it, don't repeat it, talk too much...)

Then introduce the animation template you have written: import {slideIn Down Animation} from’. / animation’;

Add: animations: [slideIn Down Animation] to @Component.
    // Add the @HostBinding attribute to the class to set the animation and style of the routing component element
    @HostBinding('@routeAnimation') routeAnimation = true;
    @HostBinding('style.display') display = 'block';
    @HostBinding('style.position') position = 'absolute';

4. So far you can go to the browser to see the effect, if there are no errors