Collection of Angular animations

app.animations.ts

import { trigger, transition, style, animate, query, stagger } from '@angular/animations';

export const fadeAnimation = trigger('fadeAnimation', [
  transition(':enter', [
    style({ opacity: 0 }), animate('300ms', style({ opacity: 1 }))]
  ),
  transition(':leave',
    [style({ opacity: 1 }), animate('300ms', style({ opacity: 0 }))]
  )
]);

export const listAnimation = trigger('listAnimation', [
  transition('* <=> *', [
    query(':enter',
      [style({ opacity: 0 }), stagger('60ms', animate('600ms ease-out', style({ opacity: 1 })))],
      { optional: true }
    ),
    query(':leave',
      animate('300ms', style({ opacity: 0 })),
      { optional: true}
    )
  ])
]);

app.component.html

<b @fadeAnimation *ngIf="show">fade animation</b>

<ul [@listAnimation]="items.length" class="items">
  <li *ngFor="let item of items" class="item">{{item}}</li>
</ul>

app.component.ts

import { Component } from '@angular/core';
import { fadeAnimation, listAnimation} from './app.animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [fadeAnimation, listAnimation]
})
export class AppComponent  {
  items = [...this.itemsOrg, ...this.itemsOrg];
}

app.module.ts

@NgModule({
  imports:      [ BrowserModule, FormsModule, BrowserAnimationsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }