Angular2 Bind Animation zu Pseudo-Element

Ich versuche Angular2 Animationssystem zu verwenden, für ein Pseudo-Element :before. Wie pro Animationsfluss, ich brauche Animation Zustand zu definieren:Angular2 Bind Animation zu Pseudo-Element

animations: [ 
trigger('heroState', [ 
    state('inactive', style({ 
    backgroundColor: '#eee', 
    transform: 'scale(1)' 
    })), 
    state('active', style({ 
    backgroundColor: '#cfd8dc', 
    transform: 'scale(1.1)' 
    })), 
    transition('inactive => active', animate('100ms ease-in')), 
    transition('active => inactive', animate('100ms ease-out')) 
])]

und es dann zu einem DOM-Element anhängen, wie folgt:

<ul> 
<li *ngFor="let hero of heroes" 
    [@heroState]="hero.state" 
    (click)="hero.toggleState()"> 
    {{hero.name}} 
</li>

Allerdings möchte ich dies heften sich an ein Pseudo before Element. Wie kann ich das machen?

Quelle

2016-10-15 Yuvals

Ich bin Wunder, wenn CSS :: vor und nach :: ares etwas, das man mit tun könnte [ngClass] pro hier: https://cssanimation.rocks/pseudo-elements/ Die Tatsache, es sagt, es fügt Pseudo-Elemente ein lässt mich fragen, ob es funktionieren wird. Keine Ahnung, wenn Sie mit den eckigen Animationen kombinieren können. Gute Frage. – JGFMK

Soweit ich weiß, ist diese Funktion nicht verfügbar. Dafür gibt es eine Feature-Anfrage. https://github.com/angular/angular/issues/10196. Aber Sie können dies erreichen, indem Sie ein Element wie span anstelle von Pseudo hinzufügen. Ich weiß, dass Ihre Anforderung durch Pseudo-Element ist, aber da es nicht vorhanden ist. – rajesh

Versuchen Sie bitte dies wird was Sie wollen.

<style> 
h1::before { 
    content: url(animation.html); 
} 
</style>

animation.html Datei

<ul> 
<li *ngFor="let hero of heroes" 
    [@heroState]="hero.state" 
    (click)="hero.toggleState()"> 
    {{hero.name}} 
</li>

Hope this für Sie arbeitet.

Mehr über dieses Using Javascript in CSS

Quelle

2017-08-06 06:16:16 Sergey

Angular2 Bind Animation zu Pseudo-Element

Antwort

Verwandte Themen