Final animation state is discarded at end of animation - angular-animations

Question

I'm trying to animate an element at the :leave transition and I'm a bit baffled by its behaviour.
trigger('inOut', [
transition(':enter', [
style({'max-height': '0'}),
animate(250, style({'max-height': '150px'}))
], { params: { maxHeight: '150px'}}),
So I would expect my element being animated to have a max-height of 15px set at the final frame of the animation... and left there! I can see the max-height being animated but then at the end its removed and the element scales to whatever height fits its content. Struggling to imagine how this is useful, am I doing something wrong?
Update - Resolved it with this
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

A way to solve this is to use a state for the end of the animation and (#animation.done) to trigger this 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';
}
}