如何在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 说明了我的问题
推荐答案
奇怪-可能是一个错误.
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屋!