ionic2 - web animation with setInterval
<p>I am following <a href="http://www.joshmorony.com/using-the-web-animations-api-in-ionic-2/" rel="nofollow noreferrer">this tutorial</a> and using the <code>web animation</code> in my <code>ionic2</code> project. </p>

<p>I have a set the animation in my <code>@component</code>:</p>

<pre><code>@Component({
  selector: 'page-feed',
  templateUrl: 'feed.html',
  //  providers: [DirectiveZHeader] ,
animations: [
    trigger('fadetransform', [
      state('unfadetransform', style({
        opacity: 1,
        transform: 'translate3d(0, 0, 0)'
      })),
      state('fadtransformed', style({
        opacity: 0.3,
        transform: 'translate3d(30%, 0, 0)'
      })),
      transition('unfadetransform &lt;=&gt; fadtransformed', animate('200ms  ease-out'))
    ]),
  ]
})///@component
...
fadetransformstate: String = 'unfadetransform';
...
toggleFadeTransform(){
  this.fadetransformstate = (this.fadetransformstate == 'unfadetransform') ? 'fadtransformed' : 'unfadetransform';
  console.log(this.fadetransformstate);///&lt;--this give the correct answer
}
...
toggleFadeTransformOn(){
  console.log("toggleFadeTransformOn");
    this.fadetransformstate = 'fadtransformed';
    setInterval(this.toggleFadeTransform, 3000);
  }
</code></pre>

<p>and my <code>html</code>:</p>

<pre><code>html:
&lt;div [@fadetransform]="fadetransformstate"&gt;&lt;img src="assets/img/img01.png" alt=""&gt;&lt;/div&gt;
&lt;button ion-button secondary small (click)="toggleFadeTransform()" &gt;toggle&lt;/button&gt;
&lt;button ion-button secondary small (click)="toggleFadeTransformOn()" &gt;set interval&lt;/button&gt;
</code></pre>

<p>If I <code>(click)="toggleFadeTransform()"</code>, I can toggle and the animation play fine. But if I <code>(click)="toggleFadeTransformOn()"</code>, I can see the <code>this.fadetransformstate</code> in the console display correctly, but the animation never play. </p>

<p>Why is <code>setInterval</code> not playing well with <code>web-animation</code>? How can I resolve this?</p>