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'))
]),

score 2 · Accepted Answer · answered Aug 28 '19 at 13:02

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.

Is there any other way that we can slow down as it would be failing in production made — krypton, Aug 30 '19 at 11:12
Maybe using webpack to find and replace `'EXPANSION_PANEL_ANIMATION_TIMING = '10000ms cubic-bezier(0.4,0.0,0.2,1)';` with the desired animation timing — Federico López, Aug 30 '19 at 15:23

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

1 Answers1