与angular2中的animiation发挥无限的对抗

Question

它是什么选择添加迭代，或者类似于ccs3 animation-iteration-count到angular 2动画？我找不到任何相关的东西。我们如何将无限游戏应用于动画？

我们在哪里添加该选项？

                  animations: [
                  trigger('flyInOut', [
                    state('in', style({transform: 'translateX(0)'})),
                    transition('void => *', [
                      animate(1500, keyframes([
                        style({transform: 'translateX(-102%)'}),
                        style({transform: 'translateX(102%)'})
                      ]))
                    ]),
                    transition('* => void', [
                      animate(1500, keyframes([
                        style({transform: 'translateX(-102%)'}),
                        style({transform: 'translateX(102%)'})
                      ]))
                    ])
                  ])
                ]

Answer 1

Angular2 中没有明确的方法可以做到这一点。我的意思是我们没有任何特定的 flag,method 或我们可以使用的东西。我想，只能通过打字稿代码来实现，如下图所示。

this.state="flyIn";

constructor(){
  setTimeout(()=>{
        this.state=this.state=="flyIn"?"flyInOut":"flyIn"; 
                               //trying to change the state
  },700)                       //700 almost half of 1500
}

HTML

[@MyAnimation]="state";

或

您可以使用requestAnimationFrame。但不确定这一点，因为您的示例中涉及 1500ms 时间。

repeatAnimation() {
  this.state=this.state=="flyIn"?"flyInOut":"flyIn"; 
  requestAnimationFrame(repeatAnimation);
}

constructor(){
  this.requestAnimationFrame(repeatOften);
}