Я пытаюсь использовать анимационную систему Angular2 для псевдоэлемента :before. В соответствии с потоком анимации мне нужно определить состояние анимации:
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'))
])]
а затем присоедините его к элементу DOM следующим образом:
<ul>
<li *ngFor="let hero of heroes"
[@heroState]="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
Однако я хочу привязать это к элементу pseudo before. Как я могу это сделать?
Попробуйте это, пожалуйста, это то, что вы хотите.
<style>
h1::before {
content: url(animation.html);
}
</style>
animation.html файл
<ul>
<li *ngFor="let hero of heroes"
[@heroState]="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
Надеюсь, это сработает для вас.
Подробнее об этом Использование Javascript в CSS