Angular Animation For Dynamically Changing Height

Question

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 sh

Answer 1

Transitions and unfixed sizes (fit-content, max-content, etc..) do not communicate well.

Here's a sample of hack for this case:

animations: [
    trigger('openCloseAnimation', [
      state('open', style({ maxHeight: '100px', overflow: 'auto' })),
      state('closed', style({ maxHeight: '60px' })),
      transition('* => closed', animate('0.2s')),
      transition('* => open', animate('0.5s')),
    ]),
  ],

With MaxHeight, your div/container dont will exceed more than 'max-content', but will behave with 'fit-content'.