如何在Angular中使用参数定义动画

Question

我按照此post的说明为我的Angular动画添加了参数但它没有用。我使用Angular 2+更具体地说是Angular 5。

这是我的动画：

import { trigger, transition, style, state, animate} from '@angular/core';

export const AnimacaoPassosCadastroImovel = trigger("animarPasso" ,[


state("inicial", style({

     width: '{{ passoInicial }}',
     border: "3px solid black"

}), {params: { passoInicial: 0 } ),

state("final", style({

   width: '{{ passoFinal }}',
   border: "3px solid blue"

}), {params: { passoFinal: 40 } ),

  transition("inicial => final", animate("800ms"))

]);

我的控制台：

Answer 1

纠正动画：

import { trigger, transition, style, state, animate} from '@angular/core';
export const AnimacaoPassosCadastroImovel = trigger("animarPasso" ,[
state("inicial", style({

     width: '{{ passoInicial }}',
     border: "3px solid black"

}), {params: { passoInicial: 0 }} ),

state("final", style({

   width: '{{ passoFinal }}',
   border: "3px solid blue"

}), {params: { passoFinal: 40 }} ),
  transition("inicial => final", animate("800ms"))
]);