Angular2 lier l'animation à l'élément pseudo

J'essaie d'utiliser le système d'animation Angular2, pour un pseudo-élément :before. Comme par flux d'animation, je dois définir l'état d'animation:Angular2 lier l'animation à l'élément pseudo

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

puis l'attacher à un élément DOM, comme suit:

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

Cependant, je veux le joindre à un pseudo before élément. Comment puis je faire ça?

Source

2016-10-15 Yuvals

Je suis si étonnant CSS :: :: avant et après quelque chose que vous pourriez ares faire avec [ngClass] par ici: https://cssanimation.rocks/pseudo-elements/ Le fait il dit qu'il insère des pseudo-éléments me fait me demander si ça va marcher. Aucune idée cependant si vous pouvez combiner avec les animations angulaires. Bonne question. – JGFMK

Pour autant que je sache, cette fonctionnalité n'est pas disponible. Il y a une demande de fonctionnalité pour cela. https://github.com/angular/angular/issues/10196. Mais vous pouvez réaliser cela en ajoutant un élément comme span au lieu de pseudo. Je sais que votre exigence est à travers un pseudo élément mais puisque ce n'est pas présent. – rajesh

Essayez ceci s'il vous plaît ce que vous voulez.

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

fichier animation.html

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

espère que cela fonctionne pour vous.

En savoir plus sur cette Using Javascript in CSS

Source

2017-08-06 06:16:16 Sergey

Angular2 lier l'animation à l'élément pseudo

Répondre

Questions connexes