2016-07-19 7 views
8

Uso tipografico & angolare 2.0.0-rc.4animazione angular2 con stili variabili

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

+0

Si può venire con plunker se sarebbe bello per aiutarti. – micronyks

+0

Ho modificato il mio post con un plnkr – nograde

risposta

9

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 :)

+1

Contrassegno corretto poiché la risposta è "non puoi ANCORA". Grazie per il link alla richiesta di funzionalità. Almeno ora posso iniziare a risolvere il problema anziché tentare di trovare una funzionalità non documentata. – nograde

+1

Sì, "non puoi ANCORA" questa è la risposta. Volevo dare maggiori dettagli sul perché così le persone possano capire. Per quanto riguarda la soluzione alternativa, potresti essere in grado di utilizzare alcuni CSS ma sarà limitato. Lavorare su questo è difficile dal momento che angolare memorizza tutte le sequenze e i dati di animazione all'interno di una classe ** AppView ** che è interna e non è possibile accedervi ... –

3

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!