ios - Angular :enter animation does not run at IOS device

Question

我有一个 ionic 4 应用程序，我创建了一个 :enter 和 :leave 动画，当用户在屏幕上滑动时应该运行...它在浏览器 chrome 上运行得很好，但是当我在 IOS 中部署应用程序时，第一个动画(当加载页面)有效，但刷第一张卡后，第二张卡不会出现。通过 safari 和检查器，我意识到该卡已渲染但不可见，不知何故下一张卡的动画类没有被删除。

当我在检查器中手动删除以下类时，动画会运行...问题是我无法手动删除它，它应该以与在 chrome 中发生的方式相同的方式运行。

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

这是我的 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>

我的TS文件，它制作了替换内容的逻辑:

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);
    }

这是我正在使用的动画，并且在 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 })
    ])
]);

我正在测试的设备是 Iphone 8 plus，运行 iOS 12.3.2，这些是我的版本:

"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

在尝试找出解决方法的几个小时后，我想到了声明每帧动画的帧，我意识到只有非动画帧没有运行。因此，如果您想为该浏览器和设备编写动画，您只需要使用具有“animate”功能的动画。如果您遇到此问题，请以这种方式声明您的动画，它将在 safari 和 iphone 上运行: 我改变了这个:

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 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 })
    ])
]);