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>

 

二、缓动函数

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