ng-animation

1.在组件定义和声明触发器

2.声明state

3.在标签上使用[@state]='state’指明是哪个触发器

4.在标签上定义函数切换state

step1,step2

定义触发器
trigger是个函数  
animations:[cardAnim]
animations这个数组存放animation相关的函数
import { trigger, state, transition, style, animate, keyframes } from '@angular/animations'
export const cardAnim = trigger('card',[
    state('out', style({transform: 'scale(1)', 'box-shadow': 'none'})),
    state('hover', style({transform: 'scale(1.1)','box-shadow': '3px 3px 5px 6px #ccc'})),
    transition('out => hover', animate('100ms ease-in')),
    transition('hover => out', animate('100ms ease-out'))
]);
声明触发器
import { cardAnim } from '../app/anims/card.anim'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
  animations: [cardAnim]--->函数
})

step3，step4

 <div class="square" [@card]="squareState" (click)="onClick()">
 //@card 这个card 是 trigger的名字
 //squareState是个普通字符串
 //这二者结合在一起，squareState就指向了一个具体的state,决定动画如何展示

 onClick(){
      this.squareState = this.squareState === 'out' ? 'hover' : 'out';
  }

坑的地方：

1.必须在组件animation数组里面声明触发器函数
2.@triggerName
3.squareState aniamtion的某个具体state
4.注意导入相关依赖
//动画组件
import { trigger, state, transition, style, animate, keyframes } from '@angular/animations'
//根组件
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';