Не работает анимация в mat-extension-panel - PullRequest
1 голос
/ 12 марта 2020

Я пытаюсь добавить собственный значок переключения на панель расширения матов. Я хотел бы анимировать этот значок на переключателе панели. Состояние переключается, и значок вращается, но без анимации.

@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];
    // });
  }
}

template:

<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

Я чувствую, что установка таймаута - это хак, какие-нибудь другие идеи, что может случиться?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...