Angular动画
发布时间:2020-12-17 07:03:52 所属栏目:安全 来源:网络整理
导读:Angular动画基于W3C的Web Animations标准。不在Angular Core中了。 动画其实就是从一个状态过渡到另一个状态。状态本身包含形状,颜色,大小等。 State 就是定义状态 Transition 是定义如何过渡。 Animate规定了具体怎样过渡,比如时间过渡的速度等。Animate
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> ? 二、缓动函数动画执行时候的速度,使其看起来更加真实。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |