如何在Angle 6动画中使用输入参数？

Question

在此动画中，我尝试将宽度从100％减小为动态起始宽度“ toolWidth”（百分比）。用户可以在应用程序中设置变量“ toolWidth”。

动画：

trigger('testAnimation', [
    state('opened', style({
      'width': '100%'
    })),
    state('*', style({
      'width': '{{toolWidth}}%'
    }), {params: {toolWidth: 30}}),
    transition('* => opened', animate('600ms ease-in')),
    transition('opened => *', animate('600ms ease-out'))
  ])

模板：

<div [@testAnimation]="{value: state, params: {toolWidth: newToolWidth}}"></div>

问题：

如果变量“状态”更改为“关闭”，则不会发生任何事情。似乎动画不会在新状态“打开”时触发。“状态”的初始值为“打开”。变量“ newToolWidth”由用户设置。如果我不使用参数，那么效果很好。

我错过了什么？

Answer 1

对于其他绕过此问题的人...这就是我在Angular 7中制作可重用动画的方式。它也可能适用于Angular 6：

这里的stackblitz演示

animations.ts

在单独的文件中创建动画，例如animations.ts。注意“ params”行。这些仅仅是默认值，可以在运行时更改：

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

export const slidingDoorAnimation = trigger('slidingDoorAnimation', 
  [
    state('in', 
      style({ width: '{{ inWidth }}', overflow:'hidden'}),
      { params: { inWidth: '250px'}}
    ),
    state('out', 
      style({ width: '{{ outWidth }}'}),
      { params: { outWidth: '*'}}
    ),
    transition('* <=> *',animate('{{ time }}'))
  ]
);

app.component.ts

现在，您可以在任何组件中使用此动画，只需从动画文件中导入它即可：

import { Component } from '@angular/core';
import { slidingDoorAnimation } from './animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [slidingDoorAnimation]
})
export class AppComponent  {
  name = 'Angular';
  public slidingDoorValue:string = 'out';

  toggleSlideContent() {
    this.slidingDoorValue = (this.slidingDoorValue == 'in')?'out':'in'; 
  }
}

app.component.html

在html文件中，将参数绑定到公共组件变量。根据动画中定义的状态，将变量slideDoorValue设置为“输入”或“输出”。样式的参数是可选的，因为它们具有在动画中定义的默认值。

<div [@slidingDoorAnimation]="{value:slidingDoorValue,params:{inWidth:'100px',time:'1000ms'}}">Hello world</div>