2017-10-20 16 views
2

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' 
    } 
} 
+0

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 –

Répondre

0

je trouve une solution, il est en réalité beaucoup plus facile que je pensais. Nous n'avons pas du tout besoin de nous lancer dans les activités de «requête pour les enfants et lancer leur animation».

Créez simplement 2 animations séparées et déclenchez-les à partir de la même expression. Avoir des déclencheurs séparés nous permet de définir des styles de début et de fin qui persistent après l'animation.

Voici quelques exemples de code:

@Component({ 
    selector: 'app-component', 
    templateUrl: './your.component.html', 
    animations: [ 
    trigger('parentAnimation', [ 
     state('expanded', style(styles.backgroundExtended)), 
     state('compact', style(styles.backgroundCompact)), 
     transition('expanded <=> compact', animate(timings.background)) 
    ]), 
    trigger('childAnimation', [ 
     state('expanded', style(styles.hideExtended)), 
     state('compact', style(styles.hideCompact)), 
     transition('expanded <=> compact', animate(timings.background)) 
    ]) 
    ] 
}) 

<div [@parentAnimation]="visualState"> 
    <h1>Hello from parent</h1> 
    <div [@childAnimation]="visulaState"> 
     A Child! 
    </div> 
    <div [@childAnimation]="visulaState"> 
     Another Child! 
    </div> 
</div> 

Pour moi, ce qui est beaucoup agréable/propre/solution plus facile. S'il vous plaît laissez un commentaire si vous voyez des inconvénients.