javascript - Angular 5 中的动画立即运行

Question

我创建了一个具有两个状态和两个状态之间的转换的触发器

当我点击制作动画时，即使我输入 3000 毫秒的过渡时间，它也会立即运行

<div class="divv" [@goals]='stateExression'>
  <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        Hello
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button (click)="anim()">LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>
</div>

状态改变函数:

stateExression : string='inactive';

anim() {
  if(this.stateExression === 'inactive')
  this.stateExression ='expended';
  else 
  this.stateExression = 'inactive';
}

动画触发器:

trigger('goals', [
    state('inactive', style({
      height: '300px'
  })),
    state('expended', style({
      height: '0px'
  })),
  transition ('inactive <=> expanded',animate('2000ms'))

  ])
]

如何让过渡运行缓慢？

Answer 1

trigger('goals', [
    state('inactive', style({
      height: '300px'
  })),
    state('expended', style({
          ^^^^^^^^^^^   
      height: '0px'
  })),
  transition ('inactive <=> expanded',animate('2000ms'))
                           ^^^^^^^^^^
  ])
]

状态名称不同 expanded 与 expended