我正在尝试为扩展面板标题内的图标设置动画。
我的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;
}
然而。单击的扩展面板上的图标没有动画(在我的情况下旋转)。我尝试在代码中的不同位置使用相同的图标和相同的状态,并且所有其他图标都具有动画效果,因此我知道触发器和动画设置正确。
如何确保图标也在单击的面板上旋转?
这里有一个斯塔克闪电战 https://stackblitz.com/edit/angular-4heuy9说明我的问题