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

我使用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的内置动画.有什么想法,我怎么能在两个平台上工作？谢谢

解决方法

由于这不是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';

然后你很高兴去.