我正在尝试将 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
元素。我该怎么做?
最佳答案
请试试这个,这将是你想要的。
<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>
希望这对你有用。
关于此的更多信息 Using Javascript in CSS
关于Angular2 将动画绑定(bind)到伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40063525/