Angular8的使用(七)：动画

个人理解：和JQuery中trigger方法一致。

1.简单示例演示

1.1.引入动画模块

在app.module.ts中引入BrowserModule和BrowserAnimationsModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1.2.组件中添加动画

在@Component中添加animations

import {Component, OnInit} from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
declare let $: any;

@Component({
  selector: 'app-xxxxx',
  templateUrl: './xxxxx.component.html',
  styleUrls: ['./xxxxx.component.scss'],
  animations: [
    trigger('btnChange', [
      state('one', style({
        backgroundColor: '#337ab7',//背景颜色
        transform: 'scale(1)' //大小
      })),
      state('two', style({
        backgroundColor: '#cc2c21',//背景颜色
        transform: 'scale(1.7)'  //大小
      })),
      transition('one => two', animate('1000ms ease-in')),
      transition('two => one', animate('1000ms ease-out'))
    ])
  ]
})

export class XxxxComponent implements OnInit {
  stateType = 'one';

  constructor( ) { }

  ngOnInit() {}
  
  changeState() {
    this.stateType = this.stateType === 'one' ? 'two' : 'one';
  }
}

说明：
1.trigger中state其实就是的key其实就是HTML代码中( [@btnChange] = “stateType”)等号右侧的值，两者在形式上进行绑定并进行switch，如果stateType为one，则选取key为one的state；
2.trigger中state的值，style为样式，也是就该状态下的样式；
3.transition为转换的方式，其中使用"=>"表示状态变化，animate为动画的展示的时间，和展示或者消失的方式。

1.3.html中使用

<button type="button" class="btn btn-primary" [@btnChange] = "stateType" (click)="changeState()">11111</button>

说明：使用[@Xxxxx]="state"和1.2中的trigger的key进行绑定，其中state为组件中的变量，或者是某个指定的类。

2.动画的进场和离场

在组件在加载或消失的时候，添加动画的进场和立场
html

<button type="button" class="btn btn-primary" [@btnChange]">11111</button>

ts

animations: [
    trigger('btnChange', [
      transition('void => *', [style({transform: 'translateX(-100%)'}), animate(5000)]),    //进场
      transition('* => void', [animate(100, style({transform: 'translateX(100%)'}))]) //离场
    ])
  ]

• 进场：void => *
• 离场：* => void

3.动画的属性说明

延迟运行：“1000ms 1000ms”代表:延迟100ms,运行1000ms

transition('one => two', animate('1000ms 100ms ease-in')),