img - Angular2 vincula la animación al pseudo elemento

ng src angular 4

Question

Estoy tratando de usar el sistema de animación Angular2, para un pseudo elemento :before . Según el flujo de animación, necesito definir el estado de la animación:

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

y luego adjuntarlo a un elemento DOM, de la siguiente manera:

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

Sin embargo, quiero adjuntar esto a un elemento pseudo before . ¿Cómo puedo hacer eso?

Answer 1

Prueba esto, por favor, esto será lo que quieras.

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

archivo animation.html

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

Espero que esto funcione para usted.

Más sobre esto Usando Javascript en CSS