如何在 Angular Material 的扩展面板中为图标设置动画? [英] How can I animate the icon in an expansion panel in Angular Material?

问题描述

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

I am trying animate an icon inside the title of an expansion panel.

我的 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;
}

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

However. The icon on the expansion panel that is clicked does not animate (rotate in my case). I tried using the same icon, and same state on different locations in the code, and all other icons animate, so I know the trigger and animations are set up correctly.

我如何确保图标也在点击的面板上旋转?

How can I make sure that the icon is rotating on the clicked panel as well?

这是一个 Stackblitz 说明了我的问题

Here is a Stackblitz illustrating my issue

推荐答案

奇怪 - 可能是一个错误.

Strange - might be a bug.

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

To work around it, define the transition and initial transform using style, and remove the transitions from the animations definition:

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 的扩展面板中为图标设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！