具有可变样式的angular2动画 [英] angular2 animation with variable styles

问题描述

使用Typescript& Angular 2.0.0-rc.4

Using Typescript & Angular 2.0.0-rc.4

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

How can I specify style property values from the template so that I can re-use buttons? For example, if I wanted to specify a different background-color for each button based on some property that is bound by the template. See below

假设以下组件：

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

推荐答案

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

Based on the title of this question I assume you want to bind expressions to an animation configuration.

如果值来自内联模板表达式或者来自组件类的属性绑定。

It doesn't really matter if the value comes from an inline template expression or from a property binding on the component class.

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

In RC4 this is not possible, the animation module/engine supports static/constant definitions. I'm using the term definitions and not styles since such bindings can be used on styles as well as keyframes, transitions, animate and basically all animation metadata factories.

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

You should expect this feature to come in the one of the next versions of angular, can't tell when but it should come. Setting animations metadata as referenced variables rather then constants is super powerful and basically mandatory as it's the base requirement for re-usable animations.

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

Having re-usable animation will lead the way for wider community adoption of the animation module. In angular 1 it was built in since the animation module used globally defined CSS classes to start animations thus CSS classes were used for the re-usable part.

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

In angular 2 the approach is different due to a lot of reasons (encapsulation, own CSS parser, animation engine not tied to CSS and more...)

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

re-usable animation will pave the path for complete 3rd party libraries for animations, think animation.css or ng-fx but as a set of angular directives/modules.

我在角度回购上打开了问题 ，大约3周前，请求此功能。动画的主要开发人员已确认它即将到来，所以紧紧抓住：）

I have opened an issue on the angular repo, about 3 weeks ago, requesting this feature. The lead dev on the animation has confirmed it's coming so hold tight :)

这篇关于具有可变样式的angular2动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！