CODEWITHSUNDEEP
angular-material2
John
John

Reputation: 11429

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.

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

My component:

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

Here is a Stackblitz illustrating my issue

Upvotes: 3

Views: 5016

Answers (1)

G. Tranter
G. Tranter

Reputation: 17958

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)'
    })),
  ]),
],

Upvotes: 4

Related Questions