Je veux fondre l'enfant d'un élément, en animant son opacité. Cela fonctionne bien, mais à la fin de l'animation, le style de l'enfant est rétabli à son état d'origine (opacité dé-set).Animation angulaire 4 sur les enfants: le style recule
Comment cela peut-il être évité/comment puis-je demander à Angular de laisser le style dans l'état cible une fois l'animation terminée?
Voici mon code:
@Component({
selector: 'app-playground',
template: `
<div [@simpleStateTransition]="simpleState">
{{ simpleState }}
<div class="fadeout">fade this child out!</div>
</div>
<button (click)="toggleSimpleState()">toggle simple state</button>
`,
animations: [
trigger('simpleStateTransition', [
transition('initial => extended', group([
query('.fadeout', animate('300ms', style({'opacity': '0'})))
])),
])
]
})
export class PlaygroundComponent {
simpleState = 'initial'
constructor() { }
toggleSimpleState() {
this.simpleState = this.simpleState === 'initial' ? 'extended' : 'initial'
}
}
Je n'ai pas beaucoup d'idée sur l'animation mais vous pouvez essayer ngAfterViewInit car c'est la sauge lorsque le rendu de rendu est compliqué. juste une idée –