Ionic 2 animations not working on iOS device

Question

I have created a project using Ionic 2 sidemenu

$ ionic start mySideMenu sidemenu --v2

I only wrote down few codes just to test if this works in iOS device/simulator.

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>

Now, after building the app and testing it in the simulator/device, the only thing worked here is the changing of color and position. Not even a single pixel was moved.

It works on android device and not on iOS. I only want to use the built-in animations by Angular. Any thoughts on this how I can make it work on both platform? Thanks

Answer 1

Since this is not an Angular 2 but an Ionic 2 question, I will lead you how I did it.

Just install web-animations-js

$ npm install --save web-animations-js

Since this is Ionic 2, we don't have polyfills.ts somewhere in the code. The better place to put it is in the main.ts file. If you have better idea feel free to comment.

main.ts

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

Then you are good to go. :)

Answer 2

As you can see in their documentation, the web animations API is not supported by iOS.

You should add the animations polyfill to your project