Angular2 wiąże animację z pseudo elementem

Próbuję użyć systemu animacji Angular2, dla pseudo elementu :before. Jak na przepływ animacji, muszę określić stan animacji:Angular2 wiąże animację z pseudo elementem

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

a następnie dołączyć go do elementu DOM, w następujący sposób:

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

Jednakże chcę dołączyć to do element pseudo before. Jak mogę to zrobić?

Źródło

2016-10-15 Yuvals

jestem dziwnego, jeśli CSS :: przed i po arów :: coś można zrobić z [ngClass] za tutaj: https://cssanimation.rocks/pseudo-elements/ Fakt mówi, że wstawia pseudoelementy, więc zastanawiam się, czy to zadziała. Nie wiem jednak, czy można połączyć z animacjami kątowymi. Fajne pytanie. – JGFMK

O ile wiem, ta funkcja nie jest dostępna. Istnieje żądanie funkcji. https://github.com/angular/angular/issues/10196. Ale możesz to osiągnąć, dodając taki element, jak przęsło, zamiast pseudo. Wiem, że twoje wymaganie jest przez pseudo element, ale ponieważ nie jest obecny. – rajesh

Spróbuj tego, proszę tego, co chcesz.

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

plik animation.html

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

Nadzieja to działa dla Ciebie.

Więcej o tej Using Javascript in CSS

Źródło

2017-08-06 06:16:16 Sergey

Angular2 wiąże animację z pseudo elementem

Odpowiedz

Powiązane problemy