How can we slow down the opening of mat-expansion panel using angular-animations and give them a fade in out effect

Question

How can I animate mat-expansion panel on open and close.

trigger('fadeInOut', [
      state('open', style({
        opacity:1
      })),
      state('closed', style({
        opacity:0
      })),
      transition('open=>closed', animate('1.5s ease-out')),
      transition('closed=>open', animate('1.5s ease-out'))
]),

Answer 1

Currently doesn't seem to be possible to alter Angular Material's animations for the components (GitHub issue for feature request). However there is hack proposed by the user omieliekh in GitHub. Applied to the MatExpasionPanel component looks like this:

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


const EXPANSION_PANEL_ANIMATION_TIMING = '10000ms cubic-bezier(0.4,0.0,0.2,1)';
MatExpansionPanel['decorators'][0].args[0].animations = [
  trigger('bodyExpansion', [
    state('collapsed, void', style({ height: '0px', visibility: 'hidden' })),
    state('expanded', style({ height: '*', visibility: 'visible' })),
    transition('expanded <=> collapsed, void => collapsed',
      animate(EXPANSION_PANEL_ANIMATION_TIMING)),
  ])];

You can see it working in this stackblitz example.

Be aware that this hack does no seem to work in production mode.