angular2系统学习 - 动画
来源:互联网 发布:黑客必备软件 编辑:程序博客网 时间:2024/06/06 02:05
1.理解ng2的动画
angular2的动画实际上是先定义若干个状态(一般就俩状态),然后元素在这若干个状态中变换。所以要记住俩东西
1. 状态
2. 状态之间的变换
2.使用ng2动画
1.首先要引入接口。
import { trigger,state,style,transition,animate,keyframes} from '@angular/core';
这里这些类具体干什么暂时先不写了,因为我也没完全搞懂,但是大多数看名字就能猜到一二。比如trigger触发,state状态,style样式等。
2.定义动画
export const animateName = trigger('triggerName', state('stateName_1',style({//state1-style})), state('stateName_2',style({//state2-style})), transition('stateName_1 => stateName_2',animate(100ms easy-in)), transition('stateName_2 => stateName_1',animate(100ms easy-out)))
3.使用动画
//首先在要使用动画的组件中引入动画import { animate } './animate.ts';...@Component({...//将动画挂载到元素上template:`<el [@triggerName]>...</el>`...//组件中的animations数组对象传入引入的动画animations:[ animate ]})
3.动画详解
在第二部分中,我们完整的使用了一个动画。但最难最复杂的还是定义动画,这部分内容就来讲讲定义动画的那些事儿。
上面定义动画部分的代码看似内容很多,配置复杂。但把它理清后会觉得也不是那么难记住。
1.trigger(触发)
首先动画是包在触发器里的。所以我们要先定义一个trigger
说明
trigger()方法接受两个参数: params1:String 动画标识符 params2:Array 多个状态、转场的数组。trigger('animateName',[state(),state()...,transition(),transition...]);
使用
trigger=('flyInLeft',[ state(), state(), ... transition(), transition(), ...])
2.state(状态)
state比较好理解,就是某一状态下元素有不同的样式。例如左边飞入动画,它有两个状态,一个是在屏幕左边看不见的位置,另一个在屏幕中显示的位置,这就是两个状态。从第一个状态到第二个状态的转场也就形成了动画。
说明
state()方法接收两个参数: param1:String 状态名称 param2:Object style方法state('stateName',style({}))
使用
state('hide', style({})),state('show', style({}))
3.transition(转场)
转场也就是由一个状态过度到另外一个状态的过程。
说明
transition()方法接受两个参数: param1:String 状态1 => 状态2 param2:Object animate方法transition('hide => show', animate()),transition('show => hide', animate())
注意
1. *(通配符)状态
*状态匹配任何动画状态。当定义那些不需要管当前处于什么状态的样式及转场时,这很有用。
2.void状态
void状态表示元素没有被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了。
0 0
- angular2系统学习 - 动画
- angular2系统学习 ------杂项
- angular2系统学习 ------杂项
- angular2系统学习 - 管道
- angular2系统学习 - 疑问
- angular2系统学习 - 用户输入
- angular2系统学习 - 路由与导航(2)
- angular2系统学习 - 路由与导航(3)
- angular2系统学习 - 路由与导航(4)
- angular2系统学习 - 路由与导航(5)
- angular2系统学习 - 属性型指令
- angular2系统学习 - 结构型指令
- Angular2学习
- Angular2 学习
- angular2系统学习 - 路由与导航(1)基础篇
- angular2后台管理系统
- 学习Angular2-typescript编译
- ANGULAR2 深入学习路由
- Appium Python API 汇总
- 编程书籍阅读随谈(第四篇)
- 关于jdk和jre的总结
- 语句-switch语句
- spring多个AOP执行先后顺序(面试问题:怎么控制多个aop的执行循序)
- angular2系统学习 - 动画
- Android返回顶部实现
- Spring基础教程网址
- DataGuard之DG FSFO(fast start failover 快速启动故障)配置
- Java实现查询记录的时间相对于当前时间
- 自主学习报告第一周S_part
- 为什么老板不喜欢员工解释?
- 最近需要学习的开源库
- SyntaxError: Unexpected token s in JSON at position 1