[Angular] Stagger animation v4.3.3
Angular animation
2023-09-14 09:00:51 时间
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: 0})), query('.form-input', [ stagger(180, [animate('300ms ease-in', style('*'))]) ]) ]) ]);
相关文章
- angular.js 入门
- angular cli
- [Angular2 Animation] Control Undefined Angular 2 States with void State
- [AngularJS] angular-md-table for Angular material design
- [Angular 2] Handling Click Events with Subjects
- 使用Angular和Nodejs搭建聊天室
- [Angular] Create a custom validator for template driven forms in Angular
- [Angular] Implementing A General Communication Mechanism For Directive Interaction
- [Angular 2] Injecting a Service
- SAP Spartacus B2B user列表对应的Angular Component
- 关于 index.ts 在大型 Angular 项目中的应用
- Angular component的职责
- angular input使用输入框filter格式化日期