Angular动画

Angular动画基于W3C的Web Animations标准。不在Angular Core中了。

动画其实就是从一个状态过渡到另一个状态。状态本身包含形状，颜色，大小等。

State就是定义状态

Transition是定义如何过渡。

Animate规定了具体怎样过渡，比如时间过渡的速度等。Animate有多个重载形式。

一、例子

通过style把一些css样式应用于实现动画的元素。

在不同的状态下应用不同的状态。

transition负责在不同状态切换时候做怎样的变换。

[@square]是动画的触发器的名字。

import { trigger,state,transition,style,animate } from ‘@angular/animations‘;


@Component({
  selector: "app-root",templateUrl: "./app.component.html",styleUrls: ["./app.component.scss"],animations: [
    trigger(‘square‘,[
      state(‘green‘,style({ ‘background-color‘: ‘green‘,‘height‘:‘100px‘,‘transform‘:‘translateX(0)‘  })),state(‘red‘,style({ ‘background-color‘: ‘red‘,‘height‘:‘50px‘,‘transform‘:‘translateX(100%)‘})),transition(‘green=>red‘,animate(‘.2s 1s‘)),transition(‘red=>green‘,animate(1000)),])
  ]
})
export class AppComponent {
  squareState:string;

  onClick(){
    this.squareState = this.squareState ===‘red‘?‘green‘:‘red‘;
  }
}

<div class="square" [@square]="squareState" (click)="onClick()">
</div>

 

二、缓动函数

动画执行时候的速度，使其看起来更加真实。