【问题标题】：How to use input parameters in angular 6 animation?如何在 Angular 6 动画中使用输入参数？
【发布时间】：2018-11-12 04:51:49
【问题描述】：

在这个动画中，我尝试将宽度从 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>

问题：

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

我错过了什么吗？

【问题讨论】：

现在可以使用了。我设置了错误的初始值，因为这个动画似乎不起作用。
可能对其他人学习本教程有用：yearofmoo.com/2017/06/new-wave-of-animation-features.html
@Simon_Weaver 除了链接的文章在所有与参数相关的代码示例中都是错误的，因为它错过了使用params 子对象：/

标签： angular angular-animations

【解决方案1】：

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

stackblitz demo here

动画.ts

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

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 文件中，将参数绑定到公共组件变量。根据动画中定义的状态，变量slidingDoorValue 被设置为“in”或“out”。样式参数是可选的，因为它们在动画中定义了默认值。

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

【讨论】：

像魅力一样工作！
太棒了。谢谢。
有趣的是，“值”似乎是必需的，即使通常您不需要（例如[@fadeInOut]）。如果是这种情况，您可以使用true。 [@fadeInOut]="{ value: true, params: { fadeInDuration: 500, fadeOutDuration: 0 }}"
[@slidingDoorAnimation]="{value:slidingDoorValue,params:{inWidth:'100px',time:'1000ms'}} 有谁知道是否存在这样的接口？在定义文件中找不到任何内容。

【解决方案2】：

动画：

trigger('openClose', [
  // ...
  state('open', style({

    backgroundColor: "{{newColor}}"
  }),{params:{ newColor: "yellow"}}),
  state('closed', style({

    backgroundColor: "{{newColor}}"
  }),{params:{ newColor: "red"}}),
  transition('open => closed', [
    animate('0.5s')
  ]),
  transition('closed => open', [
    animate('0.5s')
  ]),
]),

脚本：

ngOnInit() {
    setInterval(() => {
      this.toggle();
    }, 2000);
  }

  dynoColor:string="rgb(0,0,0)";
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
    let cRed = this.getRandom();
    let cGreen = this.getRandom();
    let cBlue = this.getRandom();
    this.dynoColor = "rgb("+cRed + ", " + cGreen + ", " + cBlue+")";
  }

  getRandom() {
    var x = Math.floor((Math.random() * 255) + 0);
    return x;
  }

模板：

<div [style.width.px]='100px' [style.height.px]='100px' [@openClose]="{value: (isOpen ? 'open' : 'closed'), params: {newColor: dynoColor}}" >

在我的情况下，我随机更改了背景颜色，并且效果很好。

我使用的是角度版本5.2.10

【讨论】：