Angular :enter animation does not run at IOS device

Question

I have an ionic 4 app and I created a :enter and :leave animation that should run when user swipes at screen... It's working perfectly on browser chrome, but when I deploy app in IOS, the first animation (when loading page) works, but after swiping first card, the second won't appear. With safari and inspector, I realized that the card is rendered but not visible, somehow the animation classes of next card is not being removed.

When I manually remove the following classes at inspector the animation runs... The problem is that I cannot remove it manually, it should run the same way it happens at chrome.

animation: gen_css_kf_44 300ms linear 0ms 1 normal forwards running;
opacity: 1;
transform: translateX(0px);
position: absolute;

This is my html:

<ion-grid
            *ngIf="!changingFeed"
            @slideLeftEnterSelf @slideLeftLeaveSelf
            class="feed-box pos-relative" (swipeleft)="changeFeed()">
          <div class="white-bg pos-relative">
              {{ feeds[feedIndex].text }}
          </div>
        </div>
    </ion-grid>

My TS file that makes the logic to replace content:

feeds = [
    {
        author: 'person',
        desc: 'desc',
        type: 'meeting',
        date: new Date(234243243244233),
        text: 'test test test test'
    }
]

changeFeed() {
        this.changingFeed = true;
        setTimeout( () => {
            if (this.feedIndex === this.feeds.length - 1) {
                this.feedIndex = 0;
            } else {
                this.feedIndex++;
            }
            this.changingFeed = false;
        }, 350);
    }

This is the animation that I'm using and that are working perfectly on Chrome:

    export const slideLeftEnterSelf = trigger('slideLeftEnterSelf', [
    transition(':enter', [
        query(':self', [style({ opacity: 0, transform: 'translateX(150%)', position: 'absolute' })], { optional: true }),
        query(':self', [animate('0.3s', style({ opacity: 1, transform: 'translateX(0)' }))], { optional: true })
    ])
]);

export const slideLeftLeaveSelf = trigger('slideLeftLeaveSelf', [
    transition(':leave', [
        query(':self', [style({ opacity: 1, transform: 'translateX(0)' })], { optional: true }),
        query(':self', [animate('0.2s', style({ opacity: 0, transform: 'translateX(-100%)' }))], { optional: true })
    ])
]);

The device I'm testing is a Iphone 8 plus, running IOS 12.3.2, and these are my versions:

"dependencies": {
    "@angular/animations": "^8.0.2",
    "@angular/core": "^7.2.2",
    "@ionic/angular": "^4.1.0",
    "@types/hammerjs": "^2.0.36",
    "hammerjs": "^2.0.8",
    "ionic-angular": "3.9.5"...

Answer 1

After hours trying to figure out how to solve this, I came out with the idea of declaring frame per frame my animation, I realized that only the non-animated frames were not running. So if you want to write an animatino for this browser and devices you need to use only animations that have "animate" function. If you having this issue declare your animation this way and it will work on safari and iphone: I changed this:

export const slideLeftEnterSelf = trigger('slideLeftEnterSelf', [
    transition(':enter', [
        query(':self', [style({ opacity: 0, transform: 'translateX(150%)', position: 'absolute' })], { optional: true }),
        query(':self', [animate('0.3s', style({ opacity: 1, transform: 'translateX(0)' }))], { optional: true })
    ])
]);

To this:

export const slideLeftEnterSelf = trigger('slideLeftEnterSelf', [
    transition(':enter', [
        query(':self', [style({ opacity: 0, transform: 'translateX(100%)' })], { optional: true }),
        query(':self', [animate('0.1s', style({ transform: 'translateX(100%)', opacity: 0 }))], { optional: true }),
        query(':self', [animate('0.1s', style({ transform: 'translateX(80%)', opacity: 0.3 }))], { optional: true }),
        query(':self', [animate('0.1s', style({ transform: 'translateX(50%)', opacity: 0.5 }))], { optional: true }),
        query(':self', [animate('0.1s', style({ transform: 'translateX(30%)', opacity: 0.8 }))], { optional: true }),
        query(':self', [animate('0.2s', style({ transform: 'translateX(0)', opacity: 1 }))], { optional: true })
    ])
]);