[Angular] Two ways to create Angular Animation, using animation() or using state()
We have two blocks to show to difference ways to do animation in Angular:
<button (click)="toggleState()">Toggle</button> <div style="display: flex; align-items: center; align-content: space-between;"> <section [@heightZeroFull] *ngIf="state === 'active'" style="width: 200px; height: 200px; background: black;">
</section> <section [@heightState]="state" style="width: 200px; height: 200px; background: blue;"></section>
</div>
heightZeroFull using animation(). heightState using state().
The way to control the state is:
state = 'active'; toggleState() {
if (this.state === 'inactive') {
this.state = 'active';
} else {
this.state = 'inactive';
}
}
In the component, we define 'animations':
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
heightZeroFull({duration: '500ms'}),
heightState({height: '200px', duration: '500ms'})
]
})
We pass in params, so it is more configurable.
Animation.ts:
import {animation, style, animate, trigger, transition, useAnimation, state} from '@angular/animations'; /*
* DSL
* */
const heightStart = animation([
style({
height:
}),
animate(
"{{duration}} ease-in",
style({
height: '*'
})
)
]); const heightEnd = animation([
animate(
"{{duration}} ease-out",
style({
height:
})
)
]); /*
* Transition
* */
// Using animation
export const heightZeroFull = (params) => {
return trigger('heightZeroFull', [
transition(':enter', useAnimation(heightStart, {params})),
transition(':leave', useAnimation(heightEnd, {params}))
]);
}; // Using state
export const heightState = (params) => {
return trigger('heightState', [
state('inactive', style({
height:
})),
state('active', style({
height: params.height
})),
transition('inactive => active', animate(`${params.duration} ease-in`)),
transition('active => inactive', animate(`${params.duration} ease-out`))
]);
};
[Angular] Two ways to create Angular Animation, using animation() or using state()的更多相关文章
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- angular源码分析:angular中各种常用函数,比较省代码的各种小技巧
angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angu ...
- angular源码分析:angular中的依赖注入式如何实现的
一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入 ...
- [Angular] Use ngx-build-plus to compile Angular Elements
We can treat Angular Element as each standlone lib and compile each Angular element spreatly. Tool w ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- angular源码分析:angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
- angular源码分析:angular的源代码目录结构说明
一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...
随机推荐
- android ActionBar的使用
Action Bar主要功能包括: 1. 显示选项菜单 2. 提供标签页的切换方式的导航功能,能够切换多个fragment. 3. 提供下拉的导航条目. 4. 提供交互式活动视图取 ...
- POJ 3168 排序+扫描
题意: 思路: 我们可以把每个矩形拆成四条线 与x轴平行的放在一起 与y轴平行的放在一起 排个序 判一判有没有交 有交 则说明不可扩张 统计一下 就可以了 处理的姿势很重要 姿势不对毁一生 //By ...
- CDQZ 0003:jubeeeeeat
0003:jubeeeeeat 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 256000kB 描述 众所周知,LZF很喜欢打一个叫Jubeat的游戏.这是个音乐游戏,游戏界面是 ...
- linux系统常用日志
系统日志记录着系统运行中的记录信息,在服务或者系统发生故障的时候,通过查询系统日志,可以帮助我们诊断.系统日志可以预警安全问题,系统日志一般都存放在/var/log目录下 /var/log/dmesg ...
- POJ——T 1961 Period
http://poj.org/problem?id=1961 Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 18542 ...
- HDU1050:Moving Tables
pid=1050">Moving Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- Chrome不能在网易网盘中上传文件的解决办法
Chrome不能在网易网盘中上传文件的解决办法1. 安装 Adobe Flash Player PPAPI,设置flash插件 chrome://settings/content/flash,许可[* ...
- Centos 6.8 安装 Protocol Buffers , v3.2.0有 BUG ,安装 3.1.0
Centos 6.8 安装 Protocol Buffers , v3.2.0有 BUG ,安装 3.1.0 切换到用户目录 cd ~ 安装 python2.7,须加入zlib wget http ...
- windows新建或者重命名文件及文件夹必须手动刷新才能显示出来
平台:win8.1 问题:windows新建或者重命名文件及文件夹必须手动刷新才能显示出来 解决方法: 注册表中HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\ ...
- Node中的JavaScript和浏览器中的JavaScript的区别
浏览器中的JavaScript: 1.基于ECMAscript规范,这个规范规定了语法 2.添加了dom:用来处理文档 document object model 3.添加了BOM:用于操作浏览器 w ...