Angular2 bind animation to pseudo element

Question

I am trying to use Angular2 animation system, for a pseudo element :before. As per animation flow, I need to define animation state:

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

and then attach it to a DOM element, as follows:

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

However, I want to attach this to a pseudo before element. How can I do that?

I'm wonder if CSS ::before and ::after ares something you could do with [ngClass] per here: cssanimation.rocks/pseudo-elements The fact it says it inserts pseudo-elements makes me wonder if it'll work. No idea though if you can combine with the angular animations. Nice question. — JGFMK
– JGFMK, Commented Aug 1, 2017 at 12:43
As far as my knowledge this feature is not available. There is a feature request for this. github.com/angular/angular/issues/10196. But you can achive this by adding an element like span instead of going for pseudo. I know your requirement is through pseudo element but since its not present. — rajesh
– rajesh, Commented Aug 4, 2017 at 12:50

Sergey · Accepted Answer · 2017-08-06 06:21:44Z

1

+50

Try this please this will what you want.

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

animation.html file

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

Hope this works for you.

More about this Using Javascript in CSS

edited Aug 6, 2017 at 6:21

answered Aug 6, 2017 at 6:16

Sergey

739 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 bind animation to pseudo element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related