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()的更多相关文章

  1. angular源码分析:angular的整个加载流程

    在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...

  2. angular源码分析:angular中各种常用函数,比较省代码的各种小技巧

    angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angu ...

  3. angular源码分析:angular中的依赖注入式如何实现的

    一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入 ...

  4. [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 ...

  5. angular源码分析:angular中脏活累活的承担者之$interpolate

    一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...

  6. angular源码分析:angular中入境检察官$sce

    一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...

  7. angular的跨域(angular百度下拉提示模拟)和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  8. angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了

    一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...

  9. angular源码分析:angular的源代码目录结构说明

    一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...

随机推荐

  1. vim 插件之commentary

    下载地址 http://www.vim.org/scripts/script.php?script_id=3695 如果是使用vundle来管理这个插件的话,你可以添加如下配置 tpope/vim-c ...

  2. Typedef和#define之间的区别

    Typedef和define都可以用来给对象取一个别名,但是两者却有着很大不同. 1. 首先,二者执行时间不同 关键字typedef在编译阶段有效,由于是在编译阶段,因此typedef有类型检查的功能 ...

  3. C#制作文本转换为声音的demo,保存音频文件到本地

    TTS(Text To Speech)可以实现把文本转换成语音并朗读出来.Windows Xp可以使用Com组件--Microsoft Speech Object Library实现TTS,Windo ...

  4. Linux下MySQL导入导出数据库

    linux下 一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径):1.导出数据和表结构:mysqldump -u用户名 -p密码 数据库名 > 数据库名.sql# ...

  5. POJ 2391 Floyd+二分+拆点最大流

    题意: 思路: 先Floyd一遍两两点之间的最短路 二分答案 建图 跑Dinic 只要不像我一样作死#define int long long 估计都没啥事-- 我T到死辣--.. 最后才改过来-- ...

  6. css3--简单的加载动画

    .load-container { width: 30%; height: auto; position: relative; margin: 1rem auto; } .load { width: ...

  7. BZOJ3994: [SDOI2015]约数个数和(莫比乌斯反演)

    Description  设d(x)为x的约数个数,给定N.M,求     Input 输入文件包含多组测试数据. 第一行,一个整数T,表示测试数据的组数. 接下来的T行,每行两个整数N.M. Out ...

  8. Ubuntu+PyQt5+Python3.6+Qt Designer 实现可视化窗口的编辑

    一.为什么写这片博文 近期将实验室的电脑的OS换成了ubuntu,想对linux进一步的了解和使用.在使用的过程中想用python+pyqt5写一个音乐播放器和视频播放器(这也是linux的乐趣所在) ...

  9. iOS - 系统经常使用框架(framework)的简介

    系统框架(framework)的简介 ImageIO  - 该框架的接口可用于导入或导出图像数据及图像元数据 CoreTelephony  - 获取IMSI号,SIM卡背面的号码是SIM卡的电子串号, ...

  10. 28.Node.js 函数和匿名函数

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 在JavaScript中,一个函数可以作为另一个函数的参数.我们可以先定义一个函数, ...