调整Angular Material2 sidenav大小时没有动画

Question

• 有一个mat-sidenav (opened="true") 和mat-nav-list
• 每个mat-list-item 都有一个mat-icon 和一个span
• mat-sidenav-container 有 autosize 指令

但是mat-sidenav的调整大小时没有动画（折叠/展开）。

HTML

<mat-sidenav-container class="example-container" autosize>
  <mat-sidenav mode="side" [opened]="true" #sidenav>
    <mat-nav-list>
      <mat-list-item (click)="isExpanded=!isExpanded">
        <mat-icon matListIcon>reorder</mat-icon>
      </mat-list-item>
      <mat-list-item>
        <mat-icon matListIcon>home</mat-icon>
        <span *ngIf="isExpanded">Home</span>
      </mat-list-item>
      <mat-list-item>
        <mat-icon matListIcon>person</mat-icon>
        <span *ngIf="isExpanded">Athlets</span>
      </mat-list-item>
      <mat-list-item>
        <mat-icon matListIcon>group</mat-icon>
        <span *ngIf="isExpanded">Teams & Partnerships</span>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <h3>Dashboard</h3>
  </mat-sidenav-content>
</mat-sidenav-container>

CSS

.example-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .mat-sidenav {
    background-color:#3a3636;
  }
  .mat-list-item {      
    color: #faf6f6;
  }
  .mat-list-item:hover {      
    color: #3a3636;
    background-color:#faf6f6;
  }

TS

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isExpanded = true;
}

如果 Angular Material2 中没有内置实现，我该如何实现动画？

Answer 1

如果你想隐藏菜单，这里有一个方法：

使用动画状态，您可以简单地使用样式转换来翻译侧边栏。

animations.ts

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

export const hideAnimation =
  trigger('hideAnimation', [
    state('opened', style({ transform: 'translateX(0%)' })),
    state('closed', style({ transform: 'translateX(-100%)' })),
    transition('* => *', [
      animate(500)
    ])
  ]);

app.component.ts

@Component({
  ...
  animations: [hideAnimation]
})
export class AppComponent { 
  state = 'opened';

  toggleState() {
    this.state = this.state === 'opened' ? 'closed' : 'opened';
  }
}

app.component.html

<mat-sidenav-container class="example-container" autosize>
  <mat-sidenav [@hideAnimation]="state" mode="side" [opened]="true" #sidenav>
    <mat-nav-list>
      <mat-list-item (click)="toggleState()">
        <mat-icon matListIcon>reorder</mat-icon>
      </mat-list-item>
      <mat-list-item>
        <mat-icon matListIcon>home</mat-icon>
        <span>Home</span>
      </mat-list-item>
      <mat-list-item>
        <mat-icon matListIcon>person</mat-icon>
        <span>Athlets</span>
      </mat-list-item>
      <mat-list-item>
        <mat-icon matListIcon>group</mat-icon>
        <span>Teams & Partnerships</span>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <h3>Dashboard</h3>
  </mat-sidenav-content>
</mat-sidenav-container>

编辑

仅隐藏跨度并减小sidenav的大小，这可以帮助您更接近您想要实现的目标：

animations.ts

export const menuAnimation =
  trigger('menuAnimation', [
    state('opened', style({ opacity: 1 })),
    state('closed', style({ opacity: 0, width: '0px', display: 'none' })),
    transition('* => *', [
      animate(500)
    ])
  ]);

app.component.html

<mat-sidenav-container class="example-container" autosize>
  <mat-sidenav mode="side" [opened]="true" #sidenav>
    <mat-nav-list>
      <mat-list-item (click)="toggleState()">
        <mat-icon matListIcon>reorder</mat-icon>
      </mat-list-item>
      <mat-list-item>
        <mat-icon matListIcon>home</mat-icon>
        <span [@menuAnimation]="state">Home</span>
      </mat-list-item>
      <mat-list-item>
        <mat-icon matListIcon>person</mat-icon>
        <span [@menuAnimation]="state">Athlets</span>
      </mat-list-item>
      <mat-list-item>
        <mat-icon matListIcon>group</mat-icon>
        <span [@menuAnimation]="state">Teams & Partnerships</span>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <h3>Dashboard</h3>
  </mat-sidenav-content>
</mat-sidenav-container>