调整角度材质 2 侧边导航的大小时没有动画

Question

• 与mat-nav-list mat-sidenav(opened="true"
(
• 每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

如果你想隐藏菜单，这里有一种方法可以做到：

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

动画.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>

编辑

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

动画.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>