Question

我正在尝试使扩展面板标题内的图标动画化。

我的HTML：

test_dat_3 <- dat %>%
                group_by(strat) %>%
                nest() %>% 
                mutate(out = map(data, ~ wtd.Ecdf(.x$var) %>% 
                          as_tibble)) %>% 
                select(-data) %>%
                unnest %>% 
                rename_at(2:3, ~c("X", "Y"))

我的组件

<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>

但是。单击扩展面板上的图标不会创建动画（以我为例旋转）。我尝试在代码中的不同位置使用相同的图标和状态，而所有其他图标都设置为动画，所以我知道触发器和动画已正确设置。

如何确保图标也在单击的面板上旋转？

这是Stackblitz，说明了我的问题

Answer 1

奇怪-可能是一个错误。

要解决此问题，请使用样式定义过渡和初始变换，然后从动画定义中删除过渡：

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的扩展面板中为图标设置动画？

1 个答案: