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('*'))]) ]) ]) ]);