Angular Animation - animate children one by one

Question

My example - StackBlitz

I need to animate 3 elements one by one. For the last two elements, I need to save the state.

Behavior -

• execute animation for first element ->animation is done, element disappeared
• next step - element hidden - execute animation for second element - element saved state for the last frame
• last step - element hidden - animation for the third element - element saved state for the last frame

Current behavior -

• execute animation for first element -> animation is done, element disappeared

then the animation for the last two elements is executed in parallel

Answer 1

I'm happy you resolve yourself. In general, if we want to make an animation step by step. it's util to have an array.

Imagine you has an array and an index like

index=-1
states=[false,false,false]

A function like

   animationDone()
   {
      index++
      if (index<states.length)
        states[index]=true
   }

allow you write some like

  <ng-container *ngFor="let item of [0,1,2] let i = index">
    <div class="card"
      [@move]="states[i]"
      (@move.done)="index==i && animationDone()"
    >
      {{ item }}
    </div>
  </ng-container>

or

<div class="card"
[@move]="states[0]"
(@move.done)="index==0 && animationDone()"
>
one
</div>
<div class="card"
[@move]="states[1]"
(@move.done)="index==1 && animationDone()"
>
two
</div>
<div class="card"
[@move]="states[2]"
(@move.done)="index==2 && animationDone()"
>
three
</div>

And our simple animation:

  animations:[
    trigger('move',[
      state('false',style({opacity:0})),
      state('true',style({opacity:1})),
      transition('false => true',[
      animate('1000ms'),
    ])])
  ]

Well, we can make some more complex. Imagine an animation like

  animations:[
    trigger('move',[
      state('0-false',style({opacity:0})),
      state('0-true',style({opacity:1})),
      state('1-false',style({transform:'scale(0)'})),
      state('1-true',style({transform:'scale(1)'})),
      state('2-false',style({transform:'translateY(-200%)'})),
      state('2-true',style({transform:'translateY(0)'})),
      transition('0-false => 0-true',[animate('1000ms')]),
      transition('1-false => 1-true',[animate('1000ms')]),
      transition('2-false => 2-true',[animate('1000ms')])
    ])
  ]

Now we can use the same, but now the [@move] is like "0-"+states[0]

<div class="card"
[@move]="'0-'+states[0]"
(@move.done)="index==0 && animationDone()"
>
one
</div>
<div class="card"
[@move]="'1-'+states[1]"
(@move.done)="index==1 && animationDone()"
>
two
</div>
<div class="card"
[@move]="'2-'+states[2]"
(@move.done)="index==2 && animationDone()"
>
three
</div>

You can see in this stackblitz

NOTE: In SO many people give our time for the simple pleasure of helping, but there is no obligation to do so. If your stackblitz had been something less complex, surely more people would have been encouraged to respond

Answer 2

Thanks to everyone who did not answer - it helps me to become better. )))

I just had to set the timings. Of course, this is not the best solution but excludes listening - animation.start & animation.done

Answer 3

I have updated the source if anyone needs an example