Angular Animations: получение списка и новый в

Question

Я схожу с ума, медленно, но верно ... весь день трачу на простую анимацию ... и все еще не добился большого успеха: '(

Итак, пожалуйста, отметьте https://stackblitz.com/edit/angular-rnf7jj

Я хочу сначала вывести список, пункт за элементом (если он есть на первом месте) ... и затем получить новый (в том же месте).

в теории это должно быть просто ...

но мне очень трудно понять угловую анимацию, не знаю почему.

Так что после многих попыток этаближайший ...

Я испробовал подход с двумя триггерами, listIn, listOut, где первый срабатывает после завершения второго (listOut) ...

app.component.html

<button (click)="onChangeNav(1)">Page 1</button><button (click)="onChangeNav(2)">Page 2</button>

<ul [@listIn]="listOutDone" [@listOut]="startAnimation" (@listOut.done)="onListOutDone($event)">
  <li *ngFor="let item of navigation">
    <a [href]="item.link">{{item.title}}</a>
  </li>
</ul>

app.component.ts

import { Component } from '@angular/core';
import {list } from './animations';

const NAVIGATION = {
  '1': [
    {title: 'link1', link:"/"},
    {title: 'link2', link:"/"},
    {title: 'link3', link:"/"},
    {title: 'link4', link:"/"}
  ],
  '2': [
    {title: 'link5', link:"/"},
    {title: 'link6', link:"/"},
    {title: 'link7', link:"/"},
    {title: 'link8', link:"/"}
  ]
};


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [list]
})
export class AppComponent  {
  navigation: any = null;
  changing: number = -1;


  constructor() {
    this.setNav();
  }

  private setNav(nav: number = 1) {
    this.navigation = NAVIGATION[nav];
  }

  onChangeNav(nav: number) {
    this.setNav(nav);
    this.changing = 1;
  }
}

и animations.ts

 import { animate, query, stagger, style, transition, trigger } from '@angular/animations';

    export const list = trigger('list', [
      transition('* <=> *', [
        query(':enter', [style({ opacity: 0, height: 0, transform: 'translateY(-100%)' })], {
          optional: true
        }),
        query(':leave', [stagger(-30, [animate('2s', style({ opacity: 0.4, transform: 'translateX(-100%)' }))])], {
          optional: true
        }),
        query(':enter', [style({ display: 'none' }), stagger(-0, [animate('2s', style({ opacity: 0.4, transform: 'translateX(-100%)' }))])], { optional: true }),

      ])
    ]);