How do you create reusable Animations in Angular 2

One possible way is to put animation trigger code in separate file and export it as const variable and use it in component as below.

animations.ts

import { trigger, state, style, transition, animate } from '@angular/core';export const slideIn = trigger('slideIn', [  state('*', style({    transform: 'translateX(100%)',  })),  state('in', style({    transform: 'translateX(0)',  })),  state('out',   style({    transform: 'translateX(-100%)',  })),  transition('* => in', animate('600ms ease-in')),  transition('in => out', animate('600ms ease-in'))]);

album-display.component.ts

import { slideIn } from './animations'; // path to your animations.ts file@Component({    //moduleId: module.id,    selector: 'album-display',    templateUrl: './albumDisplay.html',    animations: [      slideIn    ]})export class AlbumDisplay implements OnInit {    slideInState = 'in';    ...}

Maybe it's a bit late, but I'd still like to put an answer for a more dynamic version of the trigger.

Put animation trigger code in separate file and export it as function.

translate.ts

import { AnimationEntryMetadata, trigger, state, style, transition, animate } from '@angular/core';export function TranslateX( name: string, x: string, duration: number ): AnimationEntryMetadata {    return trigger( name, [            state('false', style({ transform: 'translateX(0)' }) ),            state('true',  style({ transform: 'translateX(' + x + ')' }) ),            transition('0 => 1', animate( duration + 'ms ease-in')),            transition('1 => 0', animate( duration + 'ms ease-out')),        ]);}

so, in the Component app.component.ts

import { TranslateX } from './translate';@Component({    ...    templateUrl: './app.component.html',    animations:   [                     TranslateX( 'trigger1Title','-100%', 200 ),                    TranslateX( 'trigger2Title','20vw', 700 )                  ]    ...})

and in template app.component.html

...<div [@trigger1Title]="token1"> ... </div><div [@trigger2Title]="token2"> ... </div>...

You can customize the trigger with more input data, for example separating the transition times, and so on.

Router Animation Example in Angular 4

I just finished tackling router animations myself using Angular 4, here's a couple of example animations I came up with for a fade in transition and slide in/out transition.

Check out this post for more details and a live demo.

Angular 4 Slide in/out animation

// import the required animation functions from the angular animations moduleimport { trigger, state, animate, transition, style } from '@angular/animations'; export const slideInOutAnimation =    // trigger name for attaching this animation to an element using the [@triggerName] syntax    trigger('slideInOutAnimation', [         // end state styles for route container (host)        state('*', style({            // the view covers the whole screen with a semi tranparent background            position: 'fixed',            top: 0,            left: 0,            right: 0,            bottom: 0,            backgroundColor: 'rgba(0, 0, 0, 0.8)'        })),         // route 'enter' transition        transition(':enter', [             // styles at start of transition            style({                // start with the content positioned off the right of the screen,                // -400% is required instead of -100% because the negative position adds to the width of the element                right: '-400%',                 // start with background opacity set to 0 (invisible)                backgroundColor: 'rgba(0, 0, 0, 0)'            }),             // animation and styles at end of transition            animate('.5s ease-in-out', style({                // transition the right position to 0 which slides the content into view                right: 0,                 // transition the background opacity to 0.8 to fade it in                backgroundColor: 'rgba(0, 0, 0, 0.8)'            }))        ]),         // route 'leave' transition        transition(':leave', [            // animation and styles at end of transition            animate('.5s ease-in-out', style({                // transition the right position to -400% which slides the content out of view                right: '-400%',                 // transition the background opacity to 0 to fade it out                backgroundColor: 'rgba(0, 0, 0, 0)'            }))        ])    ]);

Angular 4 Fade in animation

// import the required animation functions from the angular animations moduleimport { trigger, state, animate, transition, style } from '@angular/animations'; export const fadeInAnimation =    // trigger name for attaching this animation to an element using the [@triggerName] syntax    trigger('fadeInAnimation', [         // route 'enter' transition        transition(':enter', [             // css styles at start of transition            style({ opacity: 0 }),             // animation and styles at end of transition            animate('.3s', style({ opacity: 1 }))        ]),    ]);

Component with transition attached

import { Component } from '@angular/core'; // import fade in animationimport { fadeInAnimation } from '../_animations/index'; @Component({    moduleId: module.id.toString(),    templateUrl: 'home.component.html',     // make fade in animation available to this component    animations: [fadeInAnimation],     // attach the fade in animation to the host (root) element of this component    host: { '[@fadeInAnimation]': '' }}) export class HomeComponent {}