如何解决角度9中的交错

Question

我无法在角度9 /角度动画中使用交错和query（“ @ slide”，...）。

这是我的posts.component.ts

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css'],
  animations: [
    trigger('httpAnimation', [
      transition(':enter', [
        query('#http-header', [
          style({ opacity: 0, transform: 'translateY(-100%)' }),
          animate(1000),
        ]),
        query('@childAnimation', stagger(2000, animateChild()), {
          optional: true,
        }),
      ]),
    ]),
    trigger('childAnimation', [
      transition(':enter', [
        style({ transform: 'translateX(-10px)' }),
        animate(1000),
      ]),
      transition(':leave', [
        style({ backgroundColor: '#fcc' }),
        animate(500),
        useAnimation(bounceOutLeftAnimation, {
          params: {
            duration: '1s',
          },
        }),
      ]),
    ]),
  ],
})

这是我的posts.component.html

<div @httpAnimation>
  <h1 *ngIf="path === 'httpservice'" class="my-5 text-center" id="http-header">
    HTTP Services
  </h1>
  <div class="m-5">
    <ul class="list-group">
      <li
        @childAnimation
        class="list-group-item d-flex flex-row-reverse align-items-center justify-content-around"
        *ngFor="let post of posts"
      >
        <span>{{ post.description }}</span>
        <button class="btn btn-outline-danger" (click)="onDelete(post)">
          Delete
        </button>
      </li>
    </ul>
  </div>
</div>

我的目的是隐藏我的帖子，然后一个个地展示给他们

但是它不能正常工作

我该如何解决？

请帮助我。