angular2 Animation mit variabler Arten

Question

Mit Typoskript & Angular 2.0.0-rc.4

Wie kann ich Stil Eigenschaftswerte aus der Vorlage angeben, so dass ich wieder mit den Tasten kann? Zum Beispiel, wenn ich für jede Schaltfläche eine andere Hintergrundfarbe angeben möchte, basierend auf einer Eigenschaft, die an die Vorlage gebunden ist. Siehe unten

Nehmen wir die folgende Komponente:

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'; 
    } 
} 

Aufruf Vorlage:

<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

Basierend auf dem Titel dieser Frage, die ich nehme an, Sie Ausdrücke zu binden, zu einer Animation wollen Aufbau.

Es spielt keine Rolle, ob der Wert von einem Inline-Schablonenausdruck oder von einer Eigenschaftsbindung für die Komponentenklasse stammt.

In RC4 ist dies nicht möglich, das Animationsmodul/Engine unterstützt statische/konstante Definitionen. Ich verwende die Begriff Definitionen und nicht Arten da solche Bindungen können sowie Keyframes, Übergänge, belebte und im Grunde alles Animation Metadaten Fabriken auf Arten verwendet werden.

Sie sollten erwarten, dass diese Funktion in einer der nächsten Versionen von angular kommen wird, kann nicht sagen, wann aber es kommen sollte. Das Setzen von Animationen Metadaten als referenzierte Variablen anstelle von Konstanten ist sehr leistungsfähig und grundsätzlich verpflichtend, da es die Grundvoraussetzung für wiederverwendbare Animationen ist.

Eine wiederverwendbare Animation wird den Weg für eine breitere Akzeptanz des Animationsmoduls in der Gemeinschaft ebnen. In eckigen 1 wurde es eingebaut, da das Animationsmodul global definierte CSS-Klassen zum Starten von Animationen verwendete und somit CSS-Klassen für den wiederverwendbaren Teil verwendet wurden.

In Winkel 2 der Ansatz unterscheidet sich aufgrund einer Vielzahl von Gründen (Kapselung, eigene CSS-Parser, Animations-Engine nicht gebunden an CSS und mehr ...)

wiederverwendbare Animation wird den Weg für die vollständige ebnen 3rd-Party-Bibliotheken für Animationen, denken animation.css oder ng-fx aber als eine Reihe von eckigen Direktiven/Module.

Ich habe eine issue auf dem eckigen Repo geöffnet, etwa 3 Wochen, diese Funktion anfragend. Der Lead-Entwickler der Animation hat bestätigt, dass es kommt, also halt fest :)

Answer 2

Ab heute kannst du erreichen, was du willst!

Sie können die automatische Eigenschaftsberechnung verwenden!

In Ihrem CSS oder Vorlage Hintergrundfarbe auf die endgültige Farbe.

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

In Ihrer Animation Definition:

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

so etwas wie dies funktionieren soll!