Ionic 2 animations not working on iOS device

Question

I created a project using Ionic 2 sidemenu

$ ionic start mySideMenu sidemenu --v2 

I wrote down only a few codes to check if this works in an 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 creating the application and testing it in the simulator / device, the only thing that works here is a change in color and position. Even one pixel has not been moved.

It runs on an Android device, not an iOS device. I want to use inline animations for Angular only. Any thoughts on this, how can I make it work on both platforms? thanks

Answer 1

Since this is not a question of Angular 2, but of Ionic 2, I will give you how I did it.

Just install web animation-js

 $ npm install --save web-animations-js 

Since this is Ionic 2, we do not have polyfills.ts somewhere in the code. The best place to do this can be found in the main.ts file. If you have a 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 your documentation , the web animation API is not supported by iOS.

You must add polyfill animations to your project.