Angular 5 Stagger Animation - How to do Reverse Order

Question

While working with Angular CDK and developing a custom component, I am trying to implement stagger animation with ngIf and ngFor. The animation is a sequence of simple fade in.

The following simplified HTML:

<button (click)="visible = !visible">Toggle</button>
<div class="parent" @parentAnimation *ngIf="visible">
  <p class="child">Child 1</p>
  <p class="child">Child 2</p>
  <p class="child">Child 3</p>
</div>

And Component:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
        trigger('parentAnimation', [
            transition('void => *', [
                query('.child', style({opacity: 0})),
                query('.child', stagger('500ms', [
                    animate('100ms .1s ease-out', style({opacity: 1}))
                ]))
            ]),
            transition('* => void', [
                query('.child', style({opacity: 1})),
                query('.child', stagger('500ms', [
                    animate('100ms .1s ease-out', style({opacity: 0}))
                ]))
            ])
        ])
    ]
})
export class AppComponent  {
   visible = false;
}

StackBlitz - https://stackblitz.com/edit/angular-5dj532

As can be seen in the link above, the issue is when hiding the elements, the order needs to be reversed (LIFO).

Looking at the stagger and query documentation, I could not find a built-in way to reverse the order.

Is there any proper way to implement this using angular animations?

Answer 1

Use negative timing on the second stagger:

....
query('.child', stagger('-500ms', [....
...

Demo