Angular动画：列出清单并加入新清单

Question

我正在慢慢地迷失方向，但是肯定……整天花在一个简单的动画上……却还没有取得很多进展：'（

所以，请检查 https://stackblitz.com/edit/angular-rnf7jj

我想要的是首先逐个列出列表（如果放在首位）...然后在相同的位置得到新列表。

从理论上讲应该很简单...

但是对我来说，角度动画很难掌握，不知道为什么。

因此，经过多次尝试，这是最接近的...

我尝试了2种触发方法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 }),

      ])
    ]);