Question

我正在尝试向垫子扩展面板添加自定义切换图标。我想在面板切换时对该图标进行动画处理。状态会切换，图标会旋转，但是没有动画。

@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
  styleUrls: ['expansion-overview-example.css'],
  animations: [
    trigger('expandedTrigger', [
      state('true', style({ transform: 'rotate(0)' })),
      state('false', style({ transform: 'rotate(90deg)' })),
      transition('* <=> *', animate('300ms ease-out'))
    ])
  ]
})
export class ExpansionOverviewExample {
  panels = ['One', 'Two', 'Three'];
  expanded = [false, false, false];

  toggle(index: number) {
    // This will flip the state, however the animation will not happen
    this.expanded[index] = !this.expanded[index];

    // If I use setTimeout the animation transition works
    // setTimeout(() => {
    //   this.expanded[index] = !this.expanded[index];
    // });
  }
}

模板：

<mat-accordion hideToggle="true">
  <ng-container *ngFor="let panel of panels; let i = index">
    <mat-expansion-panel #expansionPanel (opened)="toggle(i)" (closed)="toggle(i)">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{panel}}
        </mat-panel-title>
        <button mat-icon-button><mat-icon [@expandedTrigger]='expanded[i]'>more_vert</mat-icon></button>
      </mat-expansion-panel-header>
    </mat-expansion-panel>
  </ng-container>
</mat-accordion>

有趣的部分是，如果我将状态更改放入超时，则动画效果很好。扩展面板打开/关闭时，扩展面板中是否有某些东西阻止或阻止动画？

我发现了这个：https://github.com/angular/components/blob/master/src/material/expansion/expansion-panel-header.ts#L123-L133

但是我确实验证了动画仅在最初被禁用，并且在我点击发生并开始播放动画之前，该参数在初始化后立即设置为false。

这是一个显示问题的堆栈炸弹：

https://stackblitz.com/edit/angular-3n3zkm

我觉得设置超时是一种黑客行为，还有其他想法可能会发生什么事情？

动画在垫子展开面板中不起作用

0 个答案: