关闭材质navbar()时,我遇到了一个奇怪的动画问题。当我打开导航栏时,动画工作正常,但当我关闭它时,关闭它的动画似乎无法播放。相反,它只是在“动画时间”结束时分散。但是,关闭动画在打开导航栏时会起作用,在完成之前会关闭它。因此,在动画/转换完成之前快速切换打开和关闭使其按预期工作。它看起来像这样:
animation not working on close
它应该像这样工作:
https://stackblitz.com/angular/perxaynqger?file=app%2Fsidenav-responsive-example.ts
请参阅以下代码
app.module.ts
// ANGULAR MODULES
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatStepperModule,
} from '@angular/material';
import {CdkTableModule} from '@angular/cdk/table';
// COMPOENTS AND SERVICES
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AboutMeComponent } from './components/about-me/about-me.component';
import { HomeComponent } from './components/home/home.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { WhyMeComponent } from './components/why-me/why-me.component';
// MATERIAL MODULE
@NgModule({
exports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
]
})
export class MaterialModule {}
@NgModule({
declarations: [
AppComponent,
AboutMeComponent,
HomeComponent,
ProjectsComponent,
WhyMeComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialModule
],
exports: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, NgModule, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { MatIcon, MatIconButtonCssMatStyler, MatIconBase, MatIconModule } from '@angular/material';
import { AnimationEvent, trigger, state, style, group, } from '@angular/animations';
import { animate, transition, keyframes, stagger, query} from '@angular/animations';
import { MediaMatcher } from '@angular/cdk/layout';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
mobileQuery: MediaQueryList;
private _mobileQueryListener: () => void;
constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
this.mobileQuery = media.matchMedia('(max-width: 600px)');
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
this.mobileQuery.addListener(this._mobileQueryListener);
}
}
app.comonent.html
<div class="example-container">
<mat-toolbar color="primary" class="example-toolbar">
<button mat-icon-button class="menu-icon" (click)="snav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<h1 class="app-name">Portfolio - v2</h1>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #snav [mode]="'side'">
<mat-nav-list>
<!--<a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>-->
<a mat-list-item routerLink="/home">Home</a>
<a mat-list-item routerLink="/about-me">About me</a>
<a mat-list-item routerLink="/projects">Projects</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
</div>