typescript
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule,
// NoopAnimationsModule,
...
],
...
})
export class AppModule { }
typescript
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'app-animation-example',
template: `
`,
animations: [
trigger('fade', [
state('visible', style({ opacity: 1 })),
state('hidden', style({ opacity: 0 })),
transition('visible <=> hidden', animate('500ms ease-in-out')),
]),
],
})
export class AnimationExampleComponent {
isVisible = true;
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
