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 元素上。我该如何做？

- Yuvals

---

我在想是否可以使用[ngClass]实现CSS ::before和::after的效果，参考链接：https://cssanimation.rocks/pseudo-elements/。它说它插入伪元素，这让我想知道它是否有效。但是我不知道是否可以与Angular动画结合使用。这是个好问题。 - JGFMK

据我所知，这个功能目前不可用。有一个功能请求：https://github.com/angular/angular/issues/10196。 但是你可以通过添加像span这样的元素来实现它，而不是使用伪元素。我知道你的要求是通过伪元素实现的，但由于它不存在，因此可以采用这种方法。 - rajesh

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。

- Sergey