具有可变样式的 angular2 动画答案

【问题标题】：angular2 animation with variable styles具有可变样式的 angular2 动画
【发布时间】：2018-09-16 05:55:36
【问题描述】：

使用 Typescript 和 Angular 2.0.0-rc.4

如何从模板中指定样式属性值以便重复使用按钮？例如，如果我想根据模板绑定的某些属性为每个按钮指定不同的背景颜色。见下文

假设以下组件：

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

@Component({
  selector: 'my-toggle-button',
  template: `<div @state="state" (click)="click()">{{bgColor}}</div>`,
  animations: [
    trigger('state', [
      state('inactive', style({
        'color': '#606060'
      })),
      state('active', style({
        'color': '#fff',
        'background-color': '#606060' // I want this to be bgColor
      })),
      transition('inactive <=> active', animate('100ms ease-out'))
    ])
  ]
})

export class ToggleButtonComponent implements OnInit {
  @Input() bgColor: string;
  state: string = 'inactive';
  active: boolean = false;

  ngOnInit() {
    this.state = this.active ? 'active' : 'inactive';
  }

  click() {
    this.active = !this.active;
    this.state = this.active ? 'active' : 'inactive';
  }
}

调用模板：

<h1>Animated Directive</h1>
<my-toggle-button [bgColor]="'#f00'"></my-toggle-button>
<my-toggle-button [bgColor]="'#0f0'"></my-toggle-button>
<my-toggle-button [bgColor]="'#00f'"></my-toggle-button>

http://plnkr.co/edit/KBO2pgS8B0lSAPLIf0Js?p=preview

【问题讨论】：

如果您能帮到您，您可以提出 plunker。
我用 plnkr 编辑了我的帖子

标签： javascript animation typescript angular

【解决方案1】：

根据这个问题的标题，我假设您想将表达式绑定到动画配置。

值是来自内联模板表达式还是来自组件类上的属性绑定并不重要。

在 RC4 中这是不可能的，动画模块/引擎支持静态/常量定义。我使用的是术语定义而不是 styles，因为这样的绑定可以用于样式以及 keyframes、transitions、animate 基本上是所有动画元数据工厂。

您应该期望此功能会出现在 Angular 的下一个版本中，不知道何时出现，但应该会出现。将动画元数据设置为引用变量而不是常量非常强大，而且基本上是强制性的，因为这是可重用动画的基本要求。

拥有可重复使用的动画将引领更广泛的社区采用动画模块。在 Angular 1 中，它是内置的，因为动画模块使用全局定义的 CSS 类来启动动画，因此 CSS 类用于可重用部分。

在 Angular 2 中，由于很多原因（封装、自己的 CSS 解析器、不绑定到 CSS 的动画引擎等等......），方法有所不同。

可重用动画将为完整的第 3 方动画库铺平道路，例如 animation.css 或 ng-fx，但作为一组角度指令/模块.

大约 3 周前，我在 angular repo 上打开了一个issue，请求此功能。动画的首席开发人员已经确认它即将到来，所以请抓紧:)

【讨论】：

将正确标记为答案是“你还不能”。感谢您提供功能请求的链接。至少现在我可以开始解决这个问题，而不是试图找到一个未记录的功能。
是的，'你还不能'这就是答案。我想详细说明原因，以便人们能够理解。至于解决方法，您也许可以使用一些 CSS，但它会受到限制。解决这个问题很困难，因为 Angular 将所有动画序列和数据存储在生成的 AppView 内部类中，您无法访问它...

【解决方案2】：

从今天开始，你可以实现你想要的！

您可以使用自动属性计算！

在您的 css 或模板中将 background-color 设置为最终颜色。

<div @state="state" [style.background-color]="bgColor" (click)="click()">{{bgColor}}</div>

在你的动画定义中：

animations: [
trigger('state', [
  state('inactive', style({
    'color': '#606060',
    'background-color' : 'transparent'

  })),
  state('active', style({
    'color': '#fff',
    'background-color': '*' // <====
  })),
  transition('inactive <=> active', animate('100ms ease-out'))
])
]

这样的东西应该可以工作！

【讨论】：

【解决方案3】：

从 Angular v4.2 开始完全有可能做到这一点。您可以在文章"A New Wave of Animation Features in Angular" 中找到详细信息。请参阅第 8 节。

这是其中的一个代码示例：

import {AnimationBuilder, AnimationPlayer} from "@angular/animations";
@Component({
  selector: 'loader',
  template: `
 <div class="loading-stage">
   <div class="loading-bar" #loadingBar>
     {{ percentage }}%
   </div>
 </div> 
  `
})
export class LoaderComponent {
  @ViewChild('loadingBar')
  public loadingBar;

  public player: AnimationPlayer;
  private _percentage = 0;

  constructor(private _builder: AnimationBuilder) {}

  get percentage() { return this._percentage; }

  @Input('percentage')
  set percentage(p: number) {
    this._percentage = p;

    if (this.player) {
      this.player.destroy();
    }

    const factory = this._builder.build([
      style({ width: '*' }),
      animate('350ms cubic-bezier(.35, 0, .25, 1)', style({ width: (p * 100) + '%' }))
    ]);
    this.player = factory.create(this.loadingBar.nativeElement, {});
    this.player.play();
  }
}

【讨论】：