如何在 Angular Material 中为扩展面板中的图标设置动画？

Question

我正在尝试为扩展面板标题内的图标设置动画。

我的HTML：

<mat-expansion-panel-header>
  <mat-panel-title>
      <mat-icon [@openClose]="panelOpenState? 'open' : 'closed'">keyboard_arrow_up</mat-icon>
    Click me, all other animates
  </mat-panel-title>
  <mat-panel-description>
    Type your name and age
  </mat-panel-description>
</mat-expansion-panel-header>

我的组件：

@Component({
  selector: 'expansion-overview-example',
  animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        transform: 'rotate(0deg)'
      })),
      state('closed', style({
        transform: 'rotate(-180deg)'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('1s')
      ]),
    ]),
  ],
  templateUrl: 'expansion-overview-example.html',
  styleUrls: ['expansion-overview-example.css'],
})
export class ExpansionOverviewExample {
  panelOpenState = false;
}

不过。单击的扩展面板上的图标没有动画（在我的例子中是旋转的）。我尝试在代码中的不同位置使用相同的图标和相同的状态，并且所有其他图标都具有动画效果，因此我知道触发器和动画设置正确。

如何确保图标在单击的面板上也旋转？

这里 Stackblitz 说明了我的问题

Answer 1

奇怪 - 可能是一个错误。

要解决此问题，请使用样式定义过渡和初始转换，并从动画定义中删除过渡：

SCSS

.mat-expansion-panel-header-title > .mat-icon {
  transition: 1s;
  transform: rotate(0deg);
}

TS

animations: [
  trigger('openClose', [
    // ...
    state('open', style({
      transform: 'rotate(0deg)'
    })),
    state('closed', style({
      transform: 'rotate(-180deg)'
    })),
  ]),
],

如何在 Angular Material 中为扩展面板中的图标设置动画？

How can I animate the icon in an expansion panel in Angular Material?

angular-material2