Ионные 2 анимации не работает на IOS устройства

Question

Я создал проект с использованием Ионные 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

Поскольку это не Угловое 2 но Ионные 2 вопроса, я поведу вас, как я это сделал.

Просто установите веб-анимации-JS

$ npm install --save web-animations-js 

Поскольку это Ионные 2, мы не имеем polyfills.ts где-то в коде. Лучше всего разместить его в файле main.ts. Если у вас есть идея лучше, не стесняйтесь комментировать.

main.ts

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

Тогда вы хорошо идти.)

Answer 2

Как вы можете видеть в своих documentation, то web animations API не поддерживается прошивкой.

Вы должны добавить animations polyfill в свой проект