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

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

它适用于安卓设备，不适用于 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';

那么你就可以开始了。 :)