Javascript 离子2中的Angular 2动画

我正在用ionic 2 ANgular 2和typescript制作ap，我需要在其中使用动画。 问题是动画持续时间不起作用，因此动画是即时的

动画代码

animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)',
        "transition-duration": "300ms"
      })),
      state('out', style({
        transform: 'translate3d(100%, 0, 0)',
        "transition-duration": "300ms"
      })),
      transition('in => out', animate('800ms ease')),
      transition('out => in', animate('800ms ease'))
    ]),
  ]

<ion-list *ngFor="let Position of Positions"  [@slideInOut]="Position.out">
    <ion-item>
      <ion-avatar item-start>
        <img>
      </ion-avatar>
      <h2> {{Position.Name}}</h2>
      <button ion-button icon-only item-end clear large>
        <ion-icon name="checkbox" color="{{Position.voted==true?'secondary':'danger'}}" ></ion-icon>
      </button>
    ............

注意：为了强制动画持续时间，我添加了“过渡持续时间”属性，该属性有效。因此，动画持续时间为300ms，而不是动画方法中规定的800ms

问题是，我知道它应该在没有添加

转换持续时间的情况下工作，但在我的情况下它没有，那么问题是什么

HTML代码

animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)',
        "transition-duration": "300ms"
      })),
      state('out', style({
        transform: 'translate3d(100%, 0, 0)',
        "transition-duration": "300ms"
      })),
      transition('in => out', animate('800ms ease')),
      transition('out => in', animate('800ms ease'))
    ]),
  ]

<ion-list *ngFor="let Position of Positions"  [@slideInOut]="Position.out">
    <ion-item>
      <ion-avatar item-start>
        <img>
      </ion-avatar>
      <h2> {{Position.Name}}</h2>
      <button ion-button icon-only item-end clear large>
        <ion-icon name="checkbox" color="{{Position.voted==true?'secondary':'danger'}}" ></ion-icon>
      </button>
    ............


{{Position.Name}
............

out
属性最初设置为
“in”
，然后更改为
“out”
1）您的app-module.ts中是否将
浏览器动画模块定义为“导入”

2） 您正在使用Safari/iOS。您可能需要polyfill

还有一个有用的线程。
我的app.module.ts中有NoopAnimationsModule，我仍在使用浏览器进行测试。您可能想阅读此线程：Noop用于测试银行，就是这样