animation

channel-list.component.html

<a md-list-item *ngFor="let channel of channels; trackBy: channel?.id" [routerLink]="['./' + channel.id]" [@showTrigger]="'shown'">{{channel.name}}</a>

channel-list.component.ts

import {Component, OnInit, Input, trigger, state, style, transition, animate} from '@angular/core';
import Channel from '../../models/channel';

@Component({
  selector: 'channel-list',
  templateUrl: './channel-list.component.html',
  styleUrls: ['./channel-list.component.scss'],
  animations: [
    trigger('showTrigger', [
      // Default state
      state('shown', style({
        height: '*',
        opacity: 1,
        transform: 'translateY(0%)'
      })),
      // Element added
      transition('* => *', [
       style({
          transform: 'translateY(100%)',
          opacity: 0
        }),
        animate(2000)
      ]),
      // Element removal
      transition('* => void', [
        animate('2s', style({
          opacity: 0,
          height: 0
        }))
      ])
    ])
  ]
})
export class ChannelListComponent implements OnInit {

  @Input()
  channels: Channel[];

  constructor() { }

  ngOnInit() {
  }

}