angular2 Animation mit variablen Stilen

8

Typoskript & amp; Angular 2.0.0-rc.4

Wie kann ich Stileigenschaftswerte aus der Vorlage angeben, damit ich Schaltflächen wiederverwenden 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 Sie die folgende Komponente an:

%Vor%

Anrufvorlage:

%Vor%

Zypern

    
nograde 19.07.2016, 16:48
quelle

2 Antworten

9

Basierend auf dem Titel dieser Frage gehe ich davon aus, dass Sie Ausdrücke an eine Animationskonfiguration binden möchten.

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

In RC4 ist dies nicht möglich, das Animationsmodul / die Engine unterstützt statische / konstante Definitionen . Ich verwende die Begriffsdefinitionen und nicht Stile , da solche Bindungen sowohl für Stile als auch für keyframes , Übergänge , animiert verwendet werden können und im Grunde alle Animations-Metadatenfactories.

Sie sollten erwarten, dass dieses Feature in einer der nächsten Versionen von eckig kommt, kann nicht sagen wann, aber es sollte kommen. Das Festlegen von Animationen-Metadaten als referenzierte Variablen anstelle von Konstanten ist sehr leistungsfähig und grundsätzlich obligatorisch, da dies 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 eckig 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 angular 2 ist der Ansatz aus vielen Gründen verschieden (Kapselung, eigener CSS-Parser, Animationsengine nicht an CSS gebunden und mehr ...)

Die wiederverwendbare Animation ebnet den Pfad für vollständige Bibliotheken von Drittanbietern für Animationen, denke animation.css oder ng-fx , aber als eine Menge von eckigen Direktiven / Modulen .

Ich habe vor ca. 3 Wochen ein Problem auf dem eckigen Repo geöffnet und diese Funktion angefordert. Der Hauptentwickler der Animation hat bestätigt, dass es kommt, also halte dich fest:)

    
Shlomi Assaf 19.07.2016, 22:13
quelle
3

Ab heute können Sie erreichen, was Sie wollen!

Sie können die automatische Eigenschaftsberechnung verwenden!

Stellen Sie in Ihrem CSS oder Template die Hintergrundfarbe auf die endgültige Farbe ein.

%Vor%

In Ihrer Animationsdefinition:

%Vor%

sollte so etwas funktionieren!

    
Simon Skriabin 26.10.2016 11:58
quelle