3. 开启 Angular animations 之旅

3.1 Angular animations 小试牛刀

1. 查看 package.json，看文件中是否含有 @angular/animations， 如果没有，则先进行安装 cnpm i @angular/animations -S
2. 安装完成之后，在 App.module.ts 中引入 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 并声明

// App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { MatSidenavModule } from '@angular/material';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatSidenavModule,
    CoreModule,
    BrowserAnimationsModule
  ],
  providers: [ {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: false }} ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ok， 主要配置就绪，进行下一步，来一个简单的小demo，淡入淡出动画效果， 最简单的动画就做好了

<!-- App.component.html -->
<div class="square" [@square] = "squareState"></div>
<button (click)="toggle()">toggle</button>

/* App.component.css */
.square {
  width: 200px;
  height: 200px;
  background: #000;
}

// App.component.ts
import { Component } from '@angular/core';
// 引入 animations 相关方法
import {trigger, style, state, transition, animate, keyframes} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  // Animations
  animations: [
    trigger('square', [
      state('red', style({'background': 'red'})),
      state('green', style({'background': 'green'})),
      transition('red => green', animate(1000)),
      transition('green => red', animate(2000))
    ])
  ]
})
export class AppComponent  {
  name = 'Angular';
  squareState: string;

  toggle() {
    this.squareState = this.squareState === 'red' ? 'green' : 'red';
  }
}

3.2 Angular animations 进阶

1. Group 用于同时进行一组的动画变换： group([animate(...), animate(...) ...])
2. Query & Stagger Query 用于父节点寻找子节点，很强大；Stagger 指定有多个满足Query的元素

3.2.1 Angular 路由动画

1.下面来整一个路由动画， 新建路由动画， 新建文件夹 animations 用于统一管理动画，在该文件夹下新建路由动画文件 router.anim.ts

// animations > router.anim.ts
import { trigger, style, state, transition, animate, group } from '@angular/animations';

export const slideToRight = trigger('routeAnim', [
  state('void', style({ 'position': 'fixed', 'width': '100%', 'height': '100%' })),
  state('*', style({ 'position': 'fixed', 'width': '100%', 'height': '80%' })),
  transition(':enter', [
    style({ 'transform': 'translateX(-100%)', 'opacity': '0' }),
    group([
      animate('.5s ease-in-out', style({ 'transform': 'translateX(0)' })),
      animate('.3s ease-in', style({ 'opacity': '1' }))
    ])
  ]),
  transition(':leave', [
    style({ 'transform': 'translateX(0)', 'opacity': '1' }),
    group([
      animate('.5s ease-in-out', style({ 'transform': 'translateX(100%)' })),
      animate('.3s ease-in', style({ 'opacity': '0' }))
    ])
  ]),
]);

2. 路由动画中必须使用 HostBinding模式，不能直接在element上绑定

// Project.compontnt.ts
import { Component, OnInit, HostBinding } from '@angular/core';
import {slideToRight} from '../animations/router.anim';

@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.css'],
  animations: [
    slideToRight
  ]
})
export class ProjectComponent implements OnInit {
  @HostBinding('@routeAnim') state;

  constructor() { }

  ngOnInit() {
  }

}