0

我正在关注本教程并web animation在我的ionic2项目中使用。

我在我的设置了动画@component：

@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 <=> fadtransformed', animate('200ms  ease-out'))
    ]),
  ]
})///@component
...
fadetransformstate: String = 'unfadetransform';
...
toggleFadeTransform(){
  this.fadetransformstate = (this.fadetransformstate == 'unfadetransform') ? 'fadtransformed' : 'unfadetransform';
  console.log(this.fadetransformstate);///<--this give the correct answer
}
...
toggleFadeTransformOn(){
  console.log("toggleFadeTransformOn");
    this.fadetransformstate = 'fadtransformed';
    setInterval(this.toggleFadeTransform, 3000);
  }

我的html：

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

如果我(click)="toggleFadeTransform()"，我可以切换并且动画播放正常。但是如果我(click)="toggleFadeTransformOn()"，我可以this.fadetransformstate在控制台中看到正确显示，但动画永远不会播放。

为什么setInterval玩不好web-animation？我该如何解决这个问题？

4

0 回答 0