引包
cnpm i @angular/animations@x.x.x -S
app.module.ts 中注入模块
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
imports: [
BrowserModule,
BrowserAnimationsModule,
],
对应组件内使用
<div class="login" @login *ngIf="!flag">动画</div>
import {
trigger,
state,
style,
animate,
transition
} from '@angular/animations';
@Component({
animations: [
trigger('login', [
transition(':enter', [
style({ opacity: 0 }),
animate('.5s', style({ opacity: 1 })),
]),
transition(':leave', [
animate('.5s', style({ opacity: 0 }))
])
]),
]
})