Я пытаюсь добавить собственный значок переключения на панель расширения матов. Я хотел бы анимировать этот значок на переключателе панели. Состояние переключается, и значок вращается, но без анимации.
@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
Я чувствую, что установка таймаута - это хак, какие-нибудь другие идеи, что может случиться?