animazione angular2 con stili variabili

Question

Uso tipografico & angolare 2.0.0-rc.4

Come posso specificare i valori delle proprietà di stile dal modello in modo che possa utilizzare i pulsanti ri-? Ad esempio, se volessi specificare un colore di sfondo diverso per ciascun pulsante in base a una proprietà associata al modello. Vedi sotto

assumere i seguenti componenti:

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

chiamando modello:

<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

Sulla base del titolo di questa interrogazione Presumo che si desidera associare espressioni per un'animazione configurazione.

Non importa se il valore proviene da un'espressione di modello in linea o da un bind di proprietà sulla classe del componente.

In RC4 questo non è possibile, il modulo/motore di animazione supporta statico/costante definizioni. Sto utilizzando le definizioni termine e non stili dal momento che tali attacchi possono essere utilizzati su stili così come fotogrammi chiave , transizioni, animati e praticamente tutte le fabbriche di metadati animazione.

Dovresti aspettarti che questa funzione venga in una delle prossime versioni di angolare, non si sa quando ma dovrebbe venire. Impostando i metadati delle animazioni come variabili di riferimento, piuttosto che le costanti è super potente e fondamentalmente obbligatorio in quanto è il requisito di base per le animazioni riutilizzabili .

Avere un'animazione riutilizzabile aprirà la strada ad una più ampia adozione da parte della comunità del modulo di animazione. In angular 1 è stato costruito in quanto il modulo di animazione ha utilizzato classi CSS definite globalmente per avviare le animazioni, quindi le classi CSS sono state utilizzate per la parte riutilizzabile.

In angolare 2 l'approccio è differente a causa di un sacco di motivi (incapsulamento, parser CSS, motore di animazione non legato ad CSS e altro ...)

riutilizzabile animazione aprirà il percorso completo Librerie di terze parti per animazioni, pensare animation.css o ng-fx ma come un insieme di direttive/moduli angolari.

Ho aperto uno issue sul repository angolare, circa 3 settimane fa, richiedendo questa funzione. Lo sviluppatore principale dell'animazione ha confermato che sta arrivando in modo da tenerlo stretto :)

Answer 2

A partire da oggi puoi ottenere ciò che desideri!

È possibile utilizzare il calcolo automatico delle proprietà!

Nel tuo css o modello set di sfondo-colore per il colore finale.

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

nella definizione di animazione:

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

qualcosa come questo dovrebbe funzionare!