离子 2 中的 Angular 2 动画

Question

我正在使用 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'))
    ]),
  ]

注意：我添加了 transition-duration 属性以强制动画持续时间并且它起作用了。所以动画时长是 300ms 而不是 animate 方法中所说的 800ms。

问题是我知道它应该在没有添加 transition-duration 的情况下工作，但在我的情况下它没有，那么问题是什么？

HTML 代码

<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>
    ............

out 属性最初设置为"in"，然后更改为"out"。

Answer 1

1) 您是否在您的 app-module.ts 中将 BrowserAnimationsModule 定义为“导入”？

2) 您使用的是 Safari/iOS。你可能需要web-amimations.js polyfill？

还有一个有用的线程here。