angular 2 animate 笔记
好久没有在这里写点笔记了。时隔已久,angular1 去 angular2 咯
笔记来源:https://angular.cn/docs/ts/latest/guide/animations.html
动画基于这标准:https://w3c.github.io/web-animations/
以下是基本设置
template: `
<button (click)="heroState = 'active'">enter</button>
<button (click)="heroState = null">leave</button>
<button (click)="changeAnimate()">animate</button>
<div *ngIf="heroState" [@heroState]="heroState"
(@heroState.start)="animationStarted($event)"
(@heroState.done)="animationDone($event)"
style="width:100px; height:100px;">example</div>
{{heroState}}
`,
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
在animate 中,需要理解几样东西就能明白真个笔记。
1. @trigger (绑定elem)
2. 状态 (通过状态转换改变style)
3. 过渡 (动画)
状态与过渡 :state 是状态,表明样式。过渡是动画,声明某个状态去到某个状态
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
合拼过渡
transition('inactive <=> active', animate('100ms ease-out'))
转换不保留样式:在过渡添加style,意思是当状态转换时,会使用指定样式,接着执行动画,结束后移除样式
transition('inactive => active', [
style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.3)'
}),
animate('80ms ease-in', style({
backgroundColor: '#eee',
transform: 'scale(1)'
}))
]),
通配符*,进场,出场 : 都是状态转换的方式
transition('inactive => *', [
style({transform: 'translateX(-100%)'}),
animate(100)
]) transition('* => inactive', [
animate(100, style({transform: 'translateX(100%)'}))
]) transition('* => void', [ //:leave 省略写法
animate(100, style({transform: 'translateX(100%)'}))
]) transition('void => *', [ //:enter 省略写法
animate(100, style({transform: 'translateX(100%)'}))
])
动画变量 : duration, delay,缓动(easing)函数
animate('2000ms 10 ease-in', style({
backgroundColor: '#f00',
transform: 'translateX(100%)'
})),
高级写法:keyframe (css3 原理)
animate(300, keyframes([
style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
style({opacity: 1, transform: 'translateX(15px)', offset: 0.3}),
style({opacity: 1, transform: 'translateX(0)', offset: 1.0})
]))
组合animate : 处理混合动画
group([
animate('0.3s 0.1s ease', style({
transform: 'translateX(0)',
width: 120
})),
animate('0.3s ease', style({
opacity: 1
}))
])
回调 : $event 可以得到 fromState
,toState
和totalTime
template: `
<ul>
<li *ngFor="let hero of heroes"
(@flyInOut.start)="animationStarted($event)"
(@flyInOut.done)="animationDone($event)"
[@flyInOut]="'in'">
{{hero.name}}
</li>
</ul>
`,
angular 2 animate 笔记的更多相关文章
- Angular快速学习笔记(2) -- 架构
0. angular 与angular js angular 1.0 google改名为Angular js 新版本的,2.0以上的,继续叫angular,但是除了名字还叫angular,已经是一个全 ...
- Angular 快速学习笔记(1) -- 官方示例要点
创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 <h2>{{ hero.name | u ...
- Angular【学习笔记】
1.angular入门网站 感谢@菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 学习笔记:
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular源代码学习笔记-原创
时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...
- Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 环境&版本信息声明 运行ng -v @angular/ ...
- Phonegap集成angular/bootstrap/animate.css教程
1,phonegap集成angular 按照这篇文档的步骤:http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-g ...
- Angular.JS学习笔记——1
内容来自:http://www.runoob.com/angularjs/angularjs-intro.html AngularJS 是一个 JavaScript 框架.它是一个以 JavaScri ...
- angular.js学习笔记之一
angular也是一个MVC框架,其中M即model模型表示服务器,V即view视图代表html代码,C即control控制器用来处理用户交互的部分.
随机推荐
- PHP连接和拆分数组array_combine()和array_slice()用法示例
一提起数组,可能很多PHP初学者会觉得难,但开发一些高级应用的时候,又离不开数组的使用.下面就来说下,PHP使用array_combine()函数来连接数组.用array_slice()函数来拆分数组 ...
- 属性(Attribute)资源
前面已经介绍过自定义View组件的开发,自定义View组件与Android系统提供的View组件一样,即可在Java代码中使用,也可在XML界面布局代码中使用. 当在XML布局文件中使用Android ...
- ThinkPHP使用技巧经验总结
add方法返回主键(id)的值 在往数据表中添加数据时调用add方法,默认返回值就是刚添加的id值,就不用再去查询了. save方法返回值的判断 在修改数据时,如果修改成功返回的是1,不成功则是0,如 ...
- Java泛型的类型擦除
package com.srie.testjava; import java.util.ArrayList; import java.util.List; public class TestGener ...
- 触摸滑动插件 Swiper
Swiper Swiper 是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper中文网里已有详细的使用介绍,我就不多做介绍了. http://www.swiper ...
- HDU5873
Football Games Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- [TPYBoard-Micropython之会python就能做硬件 3] 制作电子时钟
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板 一块 2.DS3231 ...
- IOS获取经度纬度
仔细研究了一下SDK文档,再结合网上的方法,写了这一个简单的获取经纬度的方法,大家看看就好. 首先要导入CoreLocation.Frame 包 .h 文件 1 2 3 4 5 6 7 8 9 #im ...
- [CSS3] 学习笔记-选择器详解(二)
1.选择器first-child.last-child.nth-child和nth-last-child 利用first-child.last-child.nth-child和nth-last-chi ...
- 认识 getAttribute() setAttribute()
getAttribute()方法不属于document对象,所以不能通过document对象调用,它只能通过元素节点对象调用 var paras = document.getElementsByTag ...