角度 - 変数としてアニメーション時間

Question

私は角度4で旋盤シミュレータを書いています。アニメーション時間を変数に設定することは可能ですか？

@Component({ 
selector: 'lathe-cell', 
templateUrl: './lathe-cell.component.html', 
styleUrls: ['./lathe-cell.component.css'], 
animations: [ 
    trigger('latheMould', [ 
     state('in', style({opacity: 0})), 
     state('cuttingStart', style({})), 
     state('cuttingEnd', style({ backgroundColor: 'green'})), 
     state('out', style({opacity: 0})), 
     transition('in => cuttingStart', [ 
      animate(3000, keyframes([ 
       style({ opacity: 1, transform: 'translate(-90px, 43px)', offset: 0 }), 
       style({ opacity: 1, transform: 'translate(-90px, 0px)', offset: 0.4 }), 
       style({ opacity: 1, transform: 'translate(0px, 0px)', offset: 1 }) 
      ])) 
     ]), 
     transition('cuttingStart => cuttingEnd', [ 
      animate(5000) 
     ]), 
     transition('cuttingEnd => out', [ 
      animate(3600, keyframes([ 
       style({ opacity: 1, transform: 'translate(90px, 0px)', offset: 0.5 }), 
       style({ opacity: 1, transform: 'translate(90px, 80px)', offset: 1 }) 
      ])) 
     ]) 
    ]) 
] 
}) 

export class LatheCellComponent implements OnInit { 

lathe: Lathe; 
state: string = 'in'; 
logWell: string[] = new Array; 

constructor(
    private latheService: LatheService, 
    private route: ActivatedRoute 
) { } 

ngOnInit(): void { 
    this.route.params 
     .switchMap((params: Params) => this.latheService.getLathe(+params['id'])) 
     .subscribe(lathe => this.lathe = lathe); 
} 
} 

移行cuttingStart => cuttingEndで、私は、変数lathe.cuttingTimeまでの時間を設定したいと思います：

私は、このコンポーネントのコードを持っています。これは可能ですか？

わかりやすくするために、一部のコードは省略されています。

Answer 1

これは現在できません。しかし、あなたはアニメーションが終了したとき（または開始これはアナログですが、アニメーションのトリガー値に状態を設定する際に、）あなたのメインの旋盤のロジックを知らせるために、アニメーション、コールバックを扱うことができます：

<div [@latheMould]="state" 
    (@latheMould.start)="onStart($event)" 
    (@latheMould.done)="onDone($event)">