如何在 Angular 中定义带参数的动画答案

【问题标题】：How to define animations with parameters in Angular如何在 Angular 中定义带参数的动画
【发布时间】：2018-07-20 05:10:22
【问题描述】：

我按照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"))

]);

我的控制台：

【问题讨论】：

您在转换中写了“=>”而不是“”。如果你只有两个州。

标签： angular angular-animations

【解决方案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"))
]);

【讨论】：

我认为我的原始标题让你感到困惑我不想声明一个简单的动画，我能够定义一个工作简单的动画，我想要一个带参数的动画。我更新了标题以更准确地表达我的问题。
您忘记在此处关闭大括号 {params: { passoInicial: 0 } } 请检查更新后的答案。