angular - Angular2将动画绑定到伪元素

Question

我正在尝试将 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>

但是，我想把它附加到一个伪before元素上。我怎样才能做到这一点？

Answer 1

请试试这个，这将是你想要的。

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

动画.html 文件

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

希望这对你有用。

更多关于在 CSS 中使用 Javascript