angular——动画

引包

# 根据你 angular 整体版本引入
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 }))
      ])
    ]),
  ]
})