Angular - Animationszeit als Variable

Question

Ich schreibe einen Drehsimulator in Angular 4. Ist es möglich, die Zeit auf eine Variable zu setzen?

Ich habe diese Komponente Code bekam:

@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); 
} 
} 

In einem Übergang cuttingStart => cuttingEnd Ich mag würde die Zeit auf eine Variable lathe.cuttingTime einzustellen. Ist das möglich?

Einige Code wurde aus Gründen der Klarheit weggelassen.

Answer 1

Dies ist derzeit nicht möglich. Sie können jedoch mit Animation-Rückrufen arbeiten, um Ihre Haupt-Drehmaschine Logik zu informieren, wenn eine Animation beendet hat (oder gestartet, obwohl dies analog Einstellung Zustand in den Animationsauslösewert zu der Zeit ist):

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