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