我们如何使用角度动画减慢 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 问题）。 但是，用户omieliekh 在 GitHub 中提出了 hack。 应用到 MatExpusionPanel 组件看起来像这样：

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

您可以在此stackblitz 示例中看到它的运行情况。

请注意，此 hack 似乎不适用于生产模式。