I have added a little animation to one of my screens. It simply transforms on translateY and increases the opacity. It works just fine in the browser but it has no effect when running it on an iOS device.
Is this a known bug? I have copied my home.page.ts file for you to take a look and point out anything obvious:
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { Animation, AnimationController } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {
@ViewChild('fadeImage', { static: false }) fadeImage:ElementRef;
@ViewChild('fadeText', { static: false }) fadeText:ElementRef;
constructor(
private animationCtrl: AnimationController
) {}
async ngAfterViewInit() {
const icon = this.animationCtrl
.create()
.addElement(this.fadeImage.nativeElement)
.duration(5000)
.easing('ease-in')
.iterations(1)
.fromTo('transform', 'translateY(50px)', 'translateY(0px)')
.fromTo('opacity', 0, 1);
const text = this.animationCtrl
.create()
.addElement(this.fadeText.nativeElement)
.duration(1500)
.easing('ease-in')
.iterations(1)
.fromTo('opacity', 0, 1);
await icon.play();
await text.play();
}
}
And this is where I call it on home.page.html:
<div id="container">
<ion-grid>
<ion-row class="ion-align-items-center ion-padding">
<ion-col size="12">
<img #fadeImage class="image-25 fadeImage" src="../assets/images/CTP_Icon.svg"/>
</ion-col>
<ion-col size="12">
<img #fadeText style="opacity: 0%;" class="image-50" src="../assets/images/CTP_Text.svg"/>
</ion-col>
</ion-row>
</ion-grid>
</div>
Thank you for any help you can offer.