Ionic 2动画无法在iOS设备上运行

Question

我使用Ionic 2 sidemenu创建了一个项目

$ ionic start mySideMenu sidemenu --v2

我只记下了几个代码，只是为了测试它是否适用于iOS设备/模拟器。

page1.ts

import { Component, trigger, state, style, transition, animate } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-page1',
    templateUrl: 'page1.html',
    animations: [
        trigger('buttonState', [
            state('left', style({ transform: 'translateX(100px)', backgroundColor: 'red' })),
            state('right', style({ transform: 'translateX(0)', backgroundColor: 'blue' })),
            transition('left <=> right', [
                animate('1000ms ease-in-out')
            ])
        ])
    ]
})
export class Page1 {

    state: string = 'left';

    constructor(public navCtrl: NavController) {

    }

    changeState() {
        this.state = this.state == 'left' ? 'right': 'left';
    }
}

page1.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary [@buttonState]="state" (click)="changeState()">Toggle Menu</button>
</ion-content>

现在，在构建应用程序并在模拟器/设备中进行测试之后，这里唯一有用的就是改变颜色和位置。甚至没有一个像素被移动。

它适用于Android设备，而不适用于iOS。我只想使用Angular的内置动画。有什么想法，我怎么能在两个平台上工作？谢谢

Answer 1

由于这不是Angular 2而是Ionic 2问题，我将引导您如何做到这一点。

只需安装 web-animations-js

即可

$ npm install --save web-animations-js

由于这是Ionic 2，我们在代码中的某处没有 polyfills.ts 。放置它的最佳位置是 main.ts 文件。如果您有更好的想法，请随时发表评论。

<强> main.ts

import 'web-animations-js/web-animations.min';

然后你很高兴。 :)

Answer 2

正如您在documentation中看到的那样，iOS不支持web animations API。

您应该将animations polyfill添加到项目中