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-browser / animations＆＃39;中导入{NoopAnimationsModule};

我希望这可以帮助有人在路上。

Angular 5动画 - 缓入/缓出时间

1 个答案: