アニメーションの最後に最終的なアニメーションの状態が破棄されます

Question

私は：leave遷移で要素をアニメートしようとしています。その動作によってちょっと困惑しています。

trigger('inOut', [ 
     transition(':enter', [ 
     style({'max-height': '0'}), 
     animate(250, style({'max-height': '150px'})) 
     ], { params: { maxHeight: '150px'}}), 

だから私は私の要素は、アニメーションの最終フレームで15ピクセルセットの最大の高さを持つようにアニメーション...とそこに残されている期待！私は、最大高さがアニメーション化されているのを見ることができますが、最後には削除され、要素はそのコンテンツに適合する高さにスケールされます。これがどのように役立つか想像するのに苦労して、私は何か間違っているのですか？

更新 - この

trigger('inOut', [ 
     state('void', style({'max-height': '0'})), 
     state('*', style({'max-height': '{{maxHeight}}'}), { params: { maxHeight: '0px'}}), 
     transition(':enter', animate(300)), 
     transition(':leave', animate(250)) 
    ]), 

Answer 1

でこれを解決する方法を、それを解決し、この状態をトリガするためにアニメーションや(@animation.done)の終了をstateを使用することです。

Here is a StackBlitz example.

app.component.html

<div [@routeAnimations]="state" (@routeAnimations.done)="onDone($event)" class="animate-div"> 
</div> 

app.component.ts

import { trigger, style, state, animate, transition } from '@angular/animations'; 

@Component({ 
    animations: [ 
    trigger('routeAnimations', [ 
     state('done', style({ 
     maxHeight: '150px' 
     })), 
     transition(':enter', [ 
     style({ 'max-height': '0' }), 
     animate(1000, style({ 'max-height': '150px' })) 
     ], { params: { maxHeight: '150px' } }) 
    ]) 
    ] 
}) 
export class AppComponent { 
    state = ''; 
    onDone(event) { 
    this.state = 'done'; 
    } 
}