Angular4.0动画操作实例详解

本文实例讲述了Angular4.0动画操作。分享给大家供大家参考，具体如下：

粗略的记录一下angular4的动画

先看一下有角的中文网关于这个给的例子。

有两个组件回家，大约。路径配置什么的这里就不细说了，之前的博文有说过，我就贴一下代码，很好理解的，

需要进口的东西我先说一下，我只贴了使用动画要用的东西，其他的我省略了，

app.module.ts

从" @angular/platform-browser "导入{ BrowserModule }；从" @ angular/platform-browser/动画"导入{ browseraningmodule }；@ ng模块({ 0.导入： [浏览器模块，浏览器国际模块，估算],})在这个简单的例子里我要对app.component.html里的内容进行动画，所以我的

app.component.ts

@ Component({选择器： ' app-root '，模板Url: ' ./app.component.html '，style URL 3360[]./app.component.css']，animations: [] //这里代码我省略了，先说一下结构，后面说具体实现。})以上就是需要写动画实现的基本结构，下面贴实现这个例子的代码。为了方便阅读，我把代码解释就贴在代码旁边

例一：

这是路由配置：

从" @angular/router "导入{路由模块，路由}；从""导入{HomeComponent} ./家/家。组件'；从""导入{关于组件} ./关于/关于。组件'；const Routes : Routes=[{ path : ' '，redirectTo: 'home '，pathMatch: 'full' }，{ path: 'home '，component: HomeComponent，data: { state: 'home' }，{ path: 'about '，component: AboutComponent，data 3: { state 33: ' about ' }]；export const AppRouting=routermodule。对于root(路由，{ usehas h : true })；app.component.html

nav a routerLink=' home ' routerLink active=' active ' home/a routerLink=' about ' routerLink active=' active ' about/a/nav main[@ routerTransition]=' gg(o)'路由器-插座#o='插座'/路由器-插座/main div[@ queryAnimation]=' goAnimate()' div class=' content ' Blah Blah/div h1 title/h1/div！- [@routerTransition]='gg(o)'，api:transition声明当提供的stateChangeExpr值满足时将运行的动画步骤序列stateChangeExpr .即等号左边即动画名称，注意中括号和@符不能省略，等号右边是一个函数，也可以是变量，满足条件便可以让动画进行，一个动画可以多次使用- app.component.ts

从“@棱角分明/核心”导入{组件}；从""导入{routerTransition} ./路由器。动画'；从" @角度/动画"导入{动画、群组、查询、交错、风格、过渡、触发}；@ Component({选择器： ' app-root '，模板Url: ' ./app.component.html '，style URL 3360[]./app.component.css']，动画：[trigger(' Routertransition '，[ //第一个参数是动画名称stateChangeExpr转换(' *=*,[ //指定什么时候执行动画，状态的来源可以是简单的对象属性，也可以是由方法计算出来的值。重点是，我们得能从组件模板中读取它。官网上有提供一些通配符，[传送门】(https://有角。cn/API/animatics/transition)查询(' :enter，leave '，style({ position: 'fixed '，width: '100%' })，{ optional: true })，query(' .block '、style({ opa city 3360 0 })、{ optional: true }、group([ //block并行执行查询(' :enter ')，[style({ transform : ' translateX(100%)' })，[animate(' 0.5s ease-in-out ')，[style({ transform : ' translateX(0%)})))))))，{ optional 3: true }，[query(' 3: leaf ')，[style({ 0block ')，[stagger(400)]，[style({ transform 3: ' translateY(1000导出类AppComponent { public exp=gg(插座){ //传递进入的组件的信息控制台。原木(出口。激活数据。国家)；返回出口。激活数据。国家；}}效果动图在最后。

比对着官网给的原料药，总结一下动画部分~

我是按自己的理解说的，有不对的地方还请多多指教，共勉！O(_)O~

stateChangeExpr即动画名称，它的属性值可以是字符串也可以是函数，若是函数，则每次状态发生改变都会重新执行，若函数返回没错，则对应的动画就会执行。

过渡它里面的动画只在满足条件时执行，过了这个点它就变回原始样式了，

状态可以保持动画样式

:进入、离开即对应void=*、*=void状态

例子二

app.component.html

div[@ queryAnimation]=' goAnimate()' h1 title/h1 div class=' content ' Blah/div/divapp。分时（同timesharing）

从“@棱角分明/核心”导入{组件}；从" @角度/动画"导入{动画、群组、查询、交错、状态、风格、过渡、触发}；@ Component({选择器： ' app-root '，模板Url: ' ./app.component.html '，style URL 3360[]./app.component.css']，动画：[trigger(' queryAnimation '，[transition(*=*，[ query('h1 ')，style({ opa city 3360 0，color: 'red'}))，query(' .内容'，样式({ opa city 3360 0，color: 'green '，width: '100px '，height: '100px '，border: '1px纯红}))，查询(' h1 '，动画(1000，样式({ opa city 3360 1，color: ' blue' })，查询(' .内容'，动画(1000)，样式({ opa city 3360 1，width: '50px '，height: '100px '，border: '10px纯绿})，{optional: true})，])，过渡(' :leave '，[样式({color: 'pink'})，动画(2000) ]，]})导出类AppComponent { public gg:构造函数(){ } goAnimate(){ }返回true} }

这个可交换的图像格式有点卡，但是可以大概看出路由切换时是有动画的。这是上面两个例子的效果图

状态只能放在引发里，不能搁在过渡里

目前就这么点，才看了一点，以后慢慢补充~~~

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。