Ionic2动画无法在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

  
    
      
    
    Page One
  



  
Ionic Menu Starter

  

    If you get lost, the docs will show you the way.
  

  Toggle Menu

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

它适用于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';

然后你很高兴去.:)