具有可變樣式的angular2動畫

Question

使用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

Answer 1

根據這個問題的標題，我假設你想將表達式綁定到動畫配置。

如果值來自內聯模板表達式或來自組件類的屬性綁定，則無關緊要。

在RC4中，這是不可能的，動畫模塊/引擎支持靜態/常量定義 。 我使用術語定義而不是樣式，因為這樣的綁定可以用於樣式以及關鍵幀 ， 過渡 ， 動畫和基本上所有動畫元數據工廠。

您應該期望這個功能出現在下一個版本的角度之一，無法告訴它什么時候應該來。 將動畫元數據設置為引用變量而不是常量是超級強大的並且基本上是強制性的，因為它是可重用動畫的基本要求。

具有可重復使用的動畫將引領更廣泛的社區采用動畫模塊的方式。 在角度1中，它是內置的，因為動畫模塊使用全局定義的CSS類來啟動動畫，因此CSS類用於可重用部分。

在角度2中，由於很多原因（封裝，自己的CSS解析器，沒有綁定到CSS的動畫引擎等等），方法是不同的。

可重復使用的動畫將為動畫的完整第三方庫鋪平道路，想想animation.css或ng-fx，但作為一組角度指令/模塊。

大約3周前，我在角度回購上打開了一個問題 ，請求此功能。 動畫的主要開發者已經確認它即將到來，所以緊緊抓住:)

Answer 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'))
])
]

這樣的事情應該有效！

Answer 3

自Angular v4.2以來完全可以做到這一點。 您可以在文章“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();
  }
}