angular2のアニメーションに無限のカウンターを再生

Question

反復を追加するオプション、またはccs3のアニメーション反復カウントに匹敵するものを角度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"; 

OR

あなたはrequestAnimationFrameを使用することができます。しかし、これについては、1500msのようなタイミングはあなたの例に関係しています。

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

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