Angular Animation For Dynamically Changing Height

I've successfully gotten a panel to animate expanding and closing when entering and leaving the DOM. The problem is I now have a busy indicator inside the panel prior to showing details, and the animation only occurs for opening the busy indicator, and snaps when the detail content is shown.

How can I get the Angular animation to animate on any height change?

I have an example here: https://stackblitz.com/edit/angular...-height?embed=1&file=src/app/app.component.ts

trigger('expandCollapseDetails', [
state('void', style({
'height': '0px',
overflow: 'hidden'
})),
//element being added into DOM.
transition(':enter', [
animate('500ms ease-in-out', style({
'height': '*',
overflow: 'hidden'
}))
]),
//element being removed from DOM.
transition(':leave', [
animate('500ms ease-in-out', style({
'height': '0px',
overflow: 'hidden'
}))
])
])

Continue reading...