I have one Ionic v4 project which have one page with animation. That animation is working on Browser and Android Real Devices but is failing in IOS Emulator using a MACBOOK.
This is the HTML :
<ion-grid fixed class="center" *ngIf="playing==true">
<ion-row>
<ion-col size="12">
<ion-card *ngFor="let card1 of cards1" [class.stop] = "stop1==true" [@cardSpinner]="card1.state">
<ion-card-content>
<ion-card-title class="center" [class.stop] = "stop1==true" expand="block">
{{card1.name}}
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<ion-card *ngFor="let card2 of cards2" [class.stop] = "stop2==true" [@cardSpinner]="card2.state">
<ion-card-content class="center">
<ion-card-title class="center" [class.stop] = "stop2==true" expand="block" >
{{card2.name}}
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
TS :
import { Component, OnInit } from '@angular/core';
import { trigger, state, animate, transition,style } from '@angular/animations';
.....
@Component({
selector: 'app-game-playing-slotmachine',
templateUrl: './game-playing-slotmachine.page.html',
styleUrls: ['./game-playing-slotmachine.page.scss'],
animations: [
trigger('cardSpinner', [
state('in', style({ opacity: 1, transform: 'translateY(0)' })),
state('out', style({ opacity: 1, display: 'none', transform: 'translateY(-100%)' })),
transition('in => out', [
style({ transform: 'translateY(0)', opacity: 1 }),
animate('0.2s', style({ transform: 'translateY(-100%)', opacity: 0 }))
]),
transition('out => in', [
style({ transform: 'translateY(100%)', opacity: 0 }),
animate('0.2s', style({ transform: 'translateY(0)', opacity: 1 }))
])
])
]
})
export class GamePlayingSlotmachinePage implements OnInit {
...
constructor(
...
) {
...
}
ngOnInit() {
...
}
getCards(){
...
this.cards1 = this.cardsList.cardsSlot1;
this.cards2 = this.cardsList.cardsSlot2;
this.cards1.forEach(card => card.state = 'out');
this.cards2.forEach(card => card.state = 'out');
}
play(){
this.playing = true;
this.animateSpin();
}
animateSpin(){
...
this.spinAnimation = true;
var timeout1 = 0;
var timeout2 = 0;
var count = 0;
this.cards1.forEach(card => card.state = 'out');
this.cards2.forEach(card => card.state = 'out');
this.stop1 = false;
this.stop2 = false;
while( count < 15){
var randomIndex1 = Math.round(Math.random() * (this.cards1.length - 1) - 0) + 0;
var randomIndex2 = Math.round(Math.random() * (this.cards2.length - 1) - 0) + 0;
count ++;
this.stateChange1(randomIndex1, timeout1, count)
this.stateChange2(randomIndex2, timeout2, count)
timeout1 = timeout1 + 550;
timeout2 = timeout2 + 850;
}
}
stateChange1(randomIndex1, timeout1, count) {
setTimeout( () => {
this.cards1.forEach(card => card.state = 'out');
this.cards1[randomIndex1].state = 'in';
if (count == 15) {this.stateChangeColor(1, timeout1)}
}, timeout1);
}
stateChange2(randomIndex2, timeout2, count) {
setTimeout( () => {
this.cards2.forEach(card => card.state = 'out');
this.cards2[randomIndex2].state = 'in';
if (count == 15) {this.stateChangeColor(2, timeout2)}
}, timeout2);
}
stateChangeColor(fieldId, timeout) {
setTimeout( () => {
if (fieldId == 1) {this.stop1 = true;}
else {
this.stop2 = true;
this.spinAnimation = false;
}
}, 2000);
}
}
I read about relation issues and found it about use polyfill and that is how I made it :
First I run npm install --save web-animations-js.
and this is the polyfill.ts file (import animations part)
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
import 'web-animations-js/web-animations.min'; // Run `npm install --save web-animations-js`.
and the import in my main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import './polyfills'
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
but still not working. I can see the methods being called, the data changing between IN and OUT, but the animation dont work.
I am using those versions:
"@angular/animations": "^8.0.0",
"web-animations-js": "^2.3.2",
"cordova-ios": "^5.1.1",
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
Am I doing something wrong ?
Thank you