Question

使用Typescript＆amp; 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

Answer 1

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

如果值来自内联模板表达式或来自组件类的属性绑定，那么这并不重要。

在RC4中，这是不可能的，动画模块/引擎支持静态/常量定义。我使用术语定义而非样式，因为此类绑定可用于样式以及关键帧，过渡， animate ，基本上都是所有动画元数据工厂。

你应该期望这个功能出现在下一个版本的角度之一，不能告诉它什么时候应该来。将动画元数据设置为引用变量而不是常量是非常强大的，并且基本上是强制性的，因为它是可重用动画的基本要求。

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

在角度2中，由于很多原因（封装，自己的CSS解析器，不依赖于CSS的动画引擎等等），方法不同。

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

我在约3周前在角度回购上打开issue，请求此功能。动画片上的主要开发人员已经证实它已经紧随其后了:)）

Answer 2

截至今天，你可以实现你想要的！

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

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

ExerciseTimeTableViewCell

在动画定义中：

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

这样的事情应该有效！

Answer 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();
  }
}

具有可变样式的angular2动画

3 个答案: