Ionic2 Angular2 animations

Ionic2 Angular2 animations

Start a new ionic 2 project 
> https://ionicframework.com/docs/v2/cli/

```
ionic start animationTest --v2
``` 

Replace content in home files with below..

```
ionic serve
```

home.html

<ion-content padding class="home">

  home

  <button ion-button color="primary" (click)="add()">Add</button>

  <div class="deck-container">

    <ion-scroll scrollX="true" class="card-scroller" id="cards">

      <div
        *ngFor='let item of items'
        [@SlideIn]="in"
        padding
        class="deck">

        <div class="card">
          meme {{item}}
        </div>

      </div>
    </ion-scroll>
  </div>

</ion-content>

home.scss

.deck-container { outline: 1px solid red }
.deck { display: inline-block }

home.ts

import {Component} from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/core';

@Component({
  templateUrl: 'home.html',
  animations: [

    trigger('fadeInOut', [
      state('in', style({opacity: '1'})),
      transition('void => *', [
        style({opacity: '0'}),
        animate(1000)
      ]),
      transition('* => void', [
        animate(1000, style({opacity: '0'}))
      ])
    ]),

    trigger('SlideIn', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        animate(500, keyframes([
          style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
          style({opacity: 0.2, transform: 'translateX(15px)',  offset: 0.3}),
          style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
        ]))
      ])
    ])
  ]

})
export class Home {

  items: any = [];
  counter: number = 0;

  constructor() {
  }

  add() {
   this.items.unshift(++this.counter);
   console.log( 'counter', this.counter );
  }
}