[Angular] Stagger animation v4.3.3

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