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

有一个 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 中没有内置的实现，我该如何实现动画？

最佳答案

如果你想隐藏菜单，这里有一种方法:

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

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>

关于angular - 调整 Angular Material2 sidenav 大小时没有动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48210956/