我们如何使用 angular-animations 减慢 mat-expansion 面板的打开速度并给它们淡入淡出效果

Question

如何在打开和关闭时设置垫子扩展面板的动画。

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

目前似乎无法更改 Angular Material 组件的动画（GitHub issue for feature request). However there is hack proposed by the user omieliekh in GitHub。应用于 MatExpasionPanel 组件如下所示：


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

<pre><code>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)),
  ])];

你可以看到它在这个 stackblitz example 中工作。

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

我们如何使用 angular-animations 减慢 mat-expansion 面板的打开速度并给它们淡入淡出效果

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

angular

angular-material

angular-animations