Angular 5 Animation - 缓入/缓出时间

Question

我正在尝试使用角度 5 进行简单的过渡。过渡本身正在工作，但是当我尝试调整过渡的缓入/缓出时段时。我的设置基于angular documentation，所以我真的不知道为什么过渡时间没有改变。

component.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [
    trigger('homeState', [

      state('hide', style({
        backgroundColor: '#eee',
        transform: 'translateX(0%)'
      })),
      state('show', style({
        backgroundColor: '#cfd8dc',
        transform: 'translateX(100%)'
      })),
      transition('show => hide', animate('6000ms ease-out')),
      transition('hide => show', animate('1000ms ease-in'))

    ])
  ]
})

component.html

<h1 [@homeState]="stateName">{{title}}</h1>
<button (click)="toggle()"></button>

切换功能在显示和隐藏状态之间切换。有人可以指出我正确的方向吗？谢谢。

更新：

好的，所以我做了更多的挖掘工作。我下载了动画的源代码。源代码具有缓动效果。所以我将该代码复制到我的项目中，但缓动效果仍然不起作用。但是当我将原始代码复制到动画项目时，一切正常。

Your global Angular CLI version (1.7.4) is greater than your local
version (1.6.5). The local Angular CLI version is used.

Answer 1

好吧，我终于想通了。我的文件中有 noop 测试模块以及常规的角度动画（这是我的错，我在没有完全理解我在做什么的情况下复制了别人的设置）。 noop 是一个无操作模块，仅用于测试。

更多信息： What's the difference between BrowserAnimationsModule and NoopAnimationsModule?

一旦我从我的 app.module.ts 中删除它，一切都很好：

从 '@angular/platform-b​​rowser/animations' 导入 { NoopAnimationsModule }；

我希望这对以后的人有所帮助。