javascript - ionic 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填充？

还有一个有用的线程 here .