免费资源部落

本篇内容主要讲解“angular状态和动画是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“angular状态和动画是什么”吧!

状态

1、什么是状态

状态表示的是要进行运动的元素在运动的不同时期所呈现的样式。

2、状态的种类

在 Angular 中，有三种类型的状态，分别为：void、*、customvoid：当元素在内存中创建好但尚未被添加到 DOM 中或将元素从 DOM 中删除时会发生此状态

*：元素被插入到 DOM 树之后的状态，或者是已经在DOM树中的元素的状态，也叫默认状态

custom：自定义状态，元素默认就在页面之中，从一个状态运动到另一个状态，比如面板的折叠和展开。

3、进出场动画

进场动画是指元素被创建后以动画的形式出现在用户面前，进场动画的状态用 void => * 表示，别名为 :enter

出场动画是指元素在被删除前执行的一段告别动画，出场动画的状态用 * => void，别名为 :leave

快速上手

1、在使用动画功能之前，需要引入动画模块，即 BrowserAnimationsModule

import{BrowserAnimationsModule}from"@angular/platform-browser/animations"@NgModule({imports:[BrowserAnimationsModule],})exportclassAppModule{}

2、默认代码解析，todo 之删除任务和添加任务

<!--在index.html文件中引入bootstrap.min.css--><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/><divclass="container"><h3>Todos</h3><divclass="form-group"><input(keyup.enter)="addItem(input)"#inputtype="text"class="form-control"placeholder="addtodos"/></div><ulclass="list-group"><li(click)="removeItem(i)"*ngFor="letitemoftodos;leti=index"class="list-group-item">{{item}}</li></ul></div>import{Component}from"@angular/core"@Component({selector:"app-root",templateUrl:"./app.component.html",styles:[]})exportclassAppComponent{//todo列表todos:string[]=["LearnAngular","LearnRxJS","LearnNgRx"]//添加todoaddItem(input:HTMLInputElement){this.todos.push(input.value)input.value=""}//删除todoremoveItem(index:number){this.todos.splice(index,1)}}

3、创建动画

trigger 方法用于创建动画，指定动画名称

transition 方法用于指定动画的运动状态，出场动画或者入场动画，或者自定义状态动画。

style 方法用于设置元素在不同的状态下所对应的样式

animate 方法用于设置运动参数，比如动画运动时间，延迟事件，运动形式

@Component({animations:[//创建动画,动画名称为slidetrigger("slide",[//指定入场动画注意:字符串两边不能有空格,箭头两边可以有也可以没有空格//void=>*可以替换为:entertransition("void=>*",[//指定元素未入场前的样式style({opacity:0,transform:"translateY(40px)"}),//指定元素入场后的样式及运动参数animate(250,style({opacity:1,transform:"translateY(0)"}))]),//指定出场动画//*=>void可以替换为:leavetransition("*=>void",[//指定元素出场后的样式和运动参数animate(600,style({opacity:0,transform:"translateX(100%)"}))])])]})

注意：入场动画中可以不指定元素的默认状态，Angular 会将 void 状态清空作为默认状态

trigger("slide",[transition(":enter",[style({opacity:0,transform:"translateY(40px)"}),animate(250)]),transition(":leave",[animate(600,style({opacity:0,transform:"translateX(100%)"}))])])

注意：要设置动画的运动参数，需要将 animate 方法的一个参数更改为字符串类型

//动画执行总时间延迟时间(可选)运动形式(可选)animate("600ms1sease-out",style({opacity:0,transform:"translateX(100%)"}))

关键帧动画

关键帧动画使用 keyframes 方法定义

transition(":leave",[animate(600,keyframes([style({offset:0.3,transform:"translateX(-80px)"}),style({offset:1,transform:"translateX(100%)"})]))])

动画回调

Angular 提供了和动画相关的两个回调函数，分别为动画开始执行时和动画执行完成后

<li@slide(@slide.start)="start($event)"(@slide.done)="done($event)"></li>import{AnimationEvent}from"@angular/animations"start(event:AnimationEvent){console.log(event)}done(event:AnimationEvent){console.log(event)}

创建可重用动画

1、将动画的定义放置在单独的文件中，方便多组件调用。

import{animate,keyframes,style,transition,trigger}from"@angular/animations"exportconstslide=trigger("slide",[transition(":enter",[style({opacity:0,transform:"translateY(40px)"}),animate(250)]),transition(":leave",[animate(600,keyframes([style({offset:0.3,transform:"translateX(-80px)"}),style({offset:1,transform:"translateX(100%)"})]))])])import{slide}from"./animations"@Component({animations:[slide]})

2、抽取具体的动画定义，方便多动画调用。

import{animate,animation,keyframes,style,transition,trigger,useAnimation}from"@angular/animations"exportconstslideInUp=animation([style({opacity:0,transform:"translateY(40px)"}),animate(250)])exportconstslideOutLeft=animation([animate(600,keyframes([style({offset:0.3,transform:"translateX(-80px)"}),style({offset:1,transform:"translateX(100%)"})]))])exportconstslide=trigger("slide",[transition(":enter",useAnimation(slideInUp)),transition(":leave",useAnimation(slideOutLeft))])

3、调用动画时传递运动总时间，延迟时间，运动形式

exportconstslideInUp=animation([style({opacity:0,transform:"translateY(40px)"}),animate("{{duration}}{{delay}}{{easing}}")],{params:{duration:"400ms",delay:"0s",easing:"ease-out"}})transition(":enter",useAnimation(slideInUp,{params:{delay:"1s"}}))

查询元素执行动画

Angular 中提供了 query 方法查找元素并为元素创建动画

import{slide}from"./animations"animations:[slide,trigger("todoAnimations",[transition(":enter",[query("h3",[style({transform:"translateY(-30px)"}),animate(300)]),//查询子级动画使其执行query("@slide",animateChild())])])]<divclass="container"@todoAnimations><h3>Todos</h3><ulclass="list-group"><li@slide(click)="removeItem(i)"*ngFor="letitemoftodos;leti=index"class="list-group-item">{{item}}</li></ul></div>

默认情况下，父级动画和子级动画按照顺序执行，先执行父级动画，再执行子级动画，可以使用 group 方法让其并行

trigger("todoAnimations",[transition(":enter",[group([query("h3",[style({transform:"translateY(-30px)"}),animate(300)]),query("@slide",animateChild())])])])

交错动画

Angular 提供了 stagger 方法，在多个元素同时执行同一个动画时，让每个元素动画的执行依次延迟。

transition(":enter",[group([query("h3",[style({transform:"translateY(-30px)"}),animate(300)]),query("@slide",stagger(200,animateChild()))])])

注意：stagger 方法只能在 query 方法内部使用

自定义状态动画

Angular 提供了 state 方法用于定义状态。

1、默认代码解析

<divclass="container"><divclass="panelpanel-default"><divclass="panel-heading"(click)="toggle()">一套框架,多种平台,移动端&桌面端</div><divclass="panel-body"><p>使用简单的声明式模板，快速实现各种特性。使用自定义组件和大量现有组件，扩展模板语言。在几乎所有的IDE中获得针对Angular的即时帮助和反馈。所有这一切，都是为了帮助你编写漂亮的应用，而不是绞尽脑汁的让代码“能用”。</p><p>从原型到全球部署，Angular都能带给你支撑Google大型应用的那些高延展性基础设施与技术。</p><p>通过WebWorker和服务端渲染，达到在如今(以及未来）的Web平台上所能达到的最高速度。Angular让你有效掌控可伸缩性。基于RxJS、Immutable.js和其它推送模型，能适应海量数据需求。</p><p>学会用Angular构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上——Web、移动Web、移动应用、原生应用和桌面原生应用。</p></div></div></div><style>.container{margin-top:100px;}.panel-heading{cursor:pointer;}</style>import{Component}from"@angular/core"@Component({selector:"app-root",templateUrl:"./app.component.html",styles:[]})exportclassAppComponent{isExpended:boolean=falsetoggle(){this.isExpended=!this.isExpended}}

2、创建动画

trigger("expandCollapse",[//使用state方法定义折叠状态元素对应的样式state("collapsed",style({height:0,overflow:"hidden",paddingTop:0,paddingBottom:0})),//使用state方法定义展开状态元素对应的样式state("expanded",style({height:"*",overflow:"auto"})),//定义展开动画transition("collapsed=>expanded",animate("400msease-out")),//定义折叠动画transition("expanded=>collapsed",animate("400msease-in"))])<divclass="panel-body"[@expandCollapse]="isExpended?'expanded':'collapsed'"></div>

路由动画

1、为路由添加状态标识，此标识即为路由执行动画时的自定义状态

constroutes:Routes=[{path:"",component:HomeComponent,pathMatch:"full",data:{animation:"one"}},{path:"about",component:AboutComponent,data:{animation:"two"}},{path:"news",component:NewsComponent,data:{animation:"three"}}]

2、通过路由插座对象获取路由状态标识，并将标识传递给动画的调用者，让动画执行当前要执行的状态是什么

<divclass="routerContainer"[@routerAnimations]="prepareRoute(outlet)"><router-outlet#outlet="outlet"></router-outlet></div>import{RouterOutlet}from"@angular/router"exportclassAppComponent{prepareRoute(outlet:RouterOutlet){return(outlet&&outlet.activatedRouteData&&outlet.activatedRouteData.animation)}}

3、将 routerContainer 设置为相对定位，将它的直接一级子元素设置成绝对定位

/*styles.css*/.routerContainer{position:relative;}.routerContainer>*{position:absolute;left:0;top:0;width:100%;}

4、创建动画

trigger("routerAnimations",[transition("one=>two,one=>three,two=>three",[query(":enter",style({transform:"translateX(100%)",opacity:0})),group([query(":enter",animate("0.4sease-in",style({transform:"translateX(0)",opacity:1}))),query(":leave",animate("0.4sease-out",style({transform:"translateX(-100%)",opacity:0})))])]),transition("three=>two,three=>one,two=>one",[query(":enter",style({transform:"translateX(-100%)",opacity:0})),group([query(":enter",animate("0.4sease-in",style({transform:"translateX(0)",opacity:1}))),query(":leave",animate("0.4sease-out",style({transform:"translateX(100%)",opacity:0})))])])])

到此，相信大家对“angular状态和动画是什么”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！