Angular2 table rows animation

Question

I have a table which its rows creates by collection, like this plnkr -

example

and this code

@Component({
  selector: 'my-app',
  template: `
  <table>
    <tr *ngFor="let element of elements">
      <td>{{element.name}}</td>
    </tr>
  </table>
  `,
})
export class App {
  elements:any;

  constructor() {
    this.elements = [
      {name:"name1"},
      {name:"name2"},
      {name:"name3"},
      {name:"name4"}
      ];
  }
}

I want to add animation each time the order of the rows changes that show the row moves to the new place. I tried to add index number as animation state but I don't know how to make the animation between them, how can I do it?