当组件在屏幕视图中时，交错动画运行

Question

我有一个Angular动画来显示元素列表：

export const list = trigger('list', [
    transition(':enter', [
        query('@listItem', stagger(250, animateChild()))
    ]),
  ]);

然后播放另一个动画：

export const listItem =
    trigger('listItem', [
        transition(':enter', [
            style({ transform: 'scale(.9)', opacity: 0 }),
            animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)',
                style({ transform: 'scale(1)', opacity: 1 }))
        ])
    ]);

我有我的html：

<div @list class="row justify-content-center">
   <div @listItem class="col-sm-10 col-md-4 mb-3">
      a
   </div>
   <div @listItem class="col-sm-10 col-md-4 mb-3">
      b
   </div>
   <div @listItem class="col-sm-10 col-md-4 mb-3">
      c
   </div>
</div>

一切正常，动画表现正常。我想做的是当组件在屏幕上可见时触发该动画。然后我做了类似的事情：

<div [@list]="state" class="row justify-content-center">
       <div @listItem class="col-sm-10 col-md-4 mb-3">
          a
       </div>
       <div @listItem class="col-sm-10 col-md-4 mb-3">
          b
       </div>
       <div @listItem class="col-sm-10 col-md-4 mb-3">
          c
       </div>
    </div>

并设置动画：

export const list = trigger('list', [
    transition(':enter, hide => show', [
        query('@listItem', stagger(250, animateChild()))
    ]),
  ]);

在组件本身中，我有以下代码：

export class MyComponent implements OnInit {
    public state: string;

    constructor(public elementRef: ElementRef,
                @Inject(PLATFORM_ID) private platformId: Object) { }

    ngOnInit(): void {
        this.updateState();
    }

    @HostListener('window:scroll', ['$event'])
    checkScroll() {
        this.updateState();
    }

    private updateState = (): void => {
        if (isPlatformBrowser(this.platformId)) {
            const componentPosition = this.elementRef.nativeElement.offsetTop;
            const scrollPosition = window.pageYOffset;
            if (scrollPosition >= componentPosition) {
                this.state = 'show';
            } else {
                this.state = 'hide';
            }
        }
    }
}

但这不起作用。我一直在看不同的示例，但它们没有起作用。我敢打赌，这是一个非常简单的语法更改，但我做不到。非常感谢您的帮助。