CODEWITHSUNDEEP
angularangular-materialangular-animations
krypton
krypton

Reputation: 61

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

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

Upvotes: 2

Views: 6010

Answers (1)

Federico López
Federico López

Reputation: 74

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.

Upvotes: 2

Related Questions