角动画不会触发

Question

所以我正在使用Angular v8和Angular Material创建一个在Scroll上进行动画处理的简单页面，我有了下一个模板。

<div cdkScrollable>
  <div name="info" [@slide]="state"  class="slide">
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <h1>something</h1>
        <img src="assets/img/logo.png" alt="logo tecmina" />
     </div>     
    </div>

主div使用cdkScrollable获得scrollY属性

import { Component, OnInit, HostListener} from '@angular/core';
import {trigger, style, state, animate, transition} from '@angular/animations';
import { ScrollDispatchModule, ScrollDispatcher } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-acerca',
  templateUrl: './acerca.component.html',
  styleUrls: ['./acerca.component.css'],
  animations: [
      trigger('slide', [
         state('hidden', style({
         left: '-100px'
      })) ,
        state('active', style({
        left: '30%'
        })),
        transition('hidden => active' , animate('1800ms ease-in')),
        transition('active => hidden' , animate('1800ms ease-out'))
        ])
        ]
        })
        export class AcercaComponent implements OnInit {


        public state:string = 'hidden';

        constructor(private scrollDispatcher: ScrollDispatcher) {}

        ngOnInit() {
         this.scrollDispatcher.scrolled().subscribe(
         (data) => {
          const scrollTop = data.getElementRef().nativeElement.scrollTop;
          if (scrollTop === 40) {
               this.startAnimation();
          }
         }
        )
        }

       startAnimation () {
         if (this.state !== 'active'){

          this.state = 'active';
          }
        }
       }

所以问题在于属性状态确实发生了变化，但是动画从未开始。我想知道是什么问题，谢谢您的回答。