Question

我正在关注this tutorial并在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的效果不佳？我该如何解决这个问题？

ionic2 - 使用setInterval的web动画

0 个答案: