子どもの角4アニメーション：スタイルが戻ってきます

Question

要素の子を不透明にアニメーション化してフェードアウトしたいと思います。正常に動作していますが、アニメーションの最後にがあると、子供のスタイルは元の状態（不透明度が設定されていません）に戻ります。

これを防ぐにはどうすればいいですか？アニメーションが完了したら、Angularがスタイルをターゲット状態にしておくように指示するにはどうすればよいですか？ここで

は私のコードです：

@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' 
    } 
} 

Answer 1

私はそれが実際に私が思ったよりもはるかに簡単だし、解決策を見つけました。私たちは、「子どものための照会」と「アニメーション」ビジネスを開始する必要はありません。

2つの別々のアニメーションを作成し、同じ式からトリガーするだけです。別々のトリガーを持つことで、アニメーションが完了した後も持続する開始スタイルと終了スタイルを定義できます。これは非常に素晴らしく/クリーナー/容易なソリューションである私に

@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> 

：ここ

は、いくつかのサンプルコードです。何か欠点がある場合はコメントを残してください。