For example, when we open a form, we want to see all the inputs fields comes into one by one.

Code for html:

     <div class="payment-form" [@jumpIntoPage]>

          <label>Email:</label>
<au-fa-input class="form-input" icon="envelope">
<input auInput type="email" placeholder="Email">
</au-fa-input> <label>Name:</label>
<input class="form-input" placeholder="Name"> <label>Card Number:</label>
<au-fa-input icon="cc-stripe" class="form-input">
<input auInput placeholder="Card Number" au-mask="9999 9999 9999 9999">
</au-fa-input> <label>Card Date:</label>
<input placeholder="Date" au-mask="19/9999" class="form-input"> <label>CVC:</label>
<input placeholder="CVC" au-mask="999" class="form-input"> <label>Coupon Code:</label>
<input placeholder="Coupon Code (optional)" class="form-input"> <button class="modal-button">Trigger Stripe Payment</button> </div>

So we add a animation to the container called 'jumpIntoPage'.

Animation:

export const jumpIntoPage = trigger('jumpIntoPage', [
transition(':enter', [
query('.form-input', style({transform: 'translateY(-50px)', opacity: })),
query('.form-input', [
stagger(, [animate('300ms ease-in', style('*'))])
])
])
]);

[Angular] Stagger animation v4.3.3的更多相关文章

  1. angular 2 animation 结构笔记 version 4.2.2

    import { Component, Input, OnInit } from '@angular/core'; import { trigger, state, style, animate, t ...

  2. [Angular2 Animation] Use Keyframes for Fine-Tuned Angular 2 Animations

    When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define a ...

  3. Angular源代码学习笔记-原创

    时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...

  4. Angular 开发环境搭建

    Angular 是一款开源 JavaScript 框架,由Google 维护,用来协助单一页面应用程序运行的.它的目标是增强基于浏览器的应用,使开发和测试变得更加容易.目前最新的 Angular 版本 ...

  5. Github资源汇集

    Github资源汇集 突然发现申请博客园已经两年有余,没有发表过一篇文章,十分惭愧.言归正传,先分享一下两年来收集的部分编程资源,大部分为Github上的项目.虽然网上这样的分享已不在少数,但不如我理 ...

  6. Angularjs 源码

    /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http://angularjs.org function t ...

  7. android 报错: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/animation/AnimatorCompatHelper;

    在使用SmartRefreshLayout时,报 java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/a ...

  8. [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)="t ...

  9. [Angular] FadeIn and FadeOut animation in Angular

    To define an Angular Animation, we using DSL type of language. Means we are going to define few anim ...

随机推荐

  1. Tomcat会话超时时怎样记录操作日志,满足安全审计要求

    众所周知.在实际的Web应用程序中,会话管理一般都採用Web容器会话管理功能. 使用Tomcat做Webserver也是如此,并且从安全的角度考虑,尽量避免去更改和干预Web容器的会话管理功能. To ...

  2. jquery09--Callbacks : 回调对象

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 6.前端开发必备!Emmet使用手册

    转自:https://www.w3cplus.com/tools/emmet-cheat-sheet.html 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个 ...

  4. 14.字符串hash寻找第一个只出现一次的字符

    //char 0-255一共256个 char getonebyhash(char *str) { if (str == NULL) { return '\0'; } char ch = '\0'; ...

  5. win7禁用启用本地连接bat及vbs

    平台:Windows 7 .8.1 目的:用bat启用禁用网卡 操作: cls @ECHO OFFtitle 启用或禁用本地连接 CLS color 0a GOTO MENU:MENU ECHO. E ...

  6. 今日SGU 5.8

    SGU 109 题意:一个n*n的矩形,起点在1,1然后每次给你一个操作,走ki步,然后你可以删除任意一个点这次步走不到的,删了就不能再走了,然后问构造这种操作,使得最后删除n*n-1个点 剩下一个点 ...

  7. widget-移除底部小部件内容

    今天有一个要求,就是在调出手机窗口小部件的时候,让其中的某些小部件不显示.折腾了好久,虽然不知道原理,最终还是实现了屏蔽其中个别小部件的方法.记录下来 要想屏蔽底部小部件的显示,只需要把相关的类跟广播 ...

  8. BZOJ 1009 GT考试 (AC自动机 + 矩阵乘法加速dp)

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1009 题意: 准考证号为\(n\)位数\(X_1X_2....X_n(0<=X_ ...

  9. Zabbix监控,Mysql,Nginx,PHP-FTPM

    一 Zabbix监控Mysql 监控Mysql,Zabbix提供了一个监控模板,所有可以直接使用.或者使用Percona提供的监控模板. 1. 使用自带监控模板 1.1.1 编写监控模板 #!/bin ...

  10. 【2017 Multi-University Training Contest - Team 7】Hard challenge

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6127 [Description] 平面上有n个点,每个点有一个价值,每两个点之间都有一条线段,定义 ...