Javascript Angular 5中的动画立即运行

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

当我单击以制作动画时，即使输入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>

动画触发器：

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

  ])
]

trigger（'goals'[
状态（'inactive'，样式({
高度：“300px”
})),
状态（‘扩展’）样式({
高度：“0px”
})),
过渡（'非活动展开'，动画（'2000ms'））
])
]

如何使转换运行缓慢？

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

状态（'inactive'，样式({
高度：“300px”
})),
状态（‘扩展’）样式({
^^^^^^^^^^^   
高度：“0px”
})),
过渡（'非活动展开'，动画（'2000ms'））
^^^^^^^^^^
])
]

---

州名不同于扩展的和扩展的你有什么错误吗？我知道有时候很难找到拼写错误，但是在stackoverlow中创建一个问题，在字符串中键入一个拼写错误有点太多了。。。如果你使用新版本的typescript，我建议使用字符串枚举或添加只读字符串道具来避免这种情况。不，谢谢你的帮助answer@Hamza哈达德，如果你觉得我的答案有帮助，请考虑通过点击投票下面的记号来回答这个问题。

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