角度：输入动画不在IOS设备上运行

我有一个爱奥尼亚4应用程序，我创建了一个：进入和：离开动画，当用户在屏幕上滑动时应该运行。。。它在浏览器chrome上运行得很好，但当我在IOS中部署应用程序时，第一个动画（加载页面时）可以工作，但在刷第一张卡后，第二个动画就不会出现。使用safari和inspector，我意识到该卡已渲染但不可见，不知何故，下一张卡的动画类并未被删除

当我在inspector手动删除以下类时，动画将运行。。。问题是我无法手动删除它，它应该以与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>

这是我正在使用的动画，它在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"...

---

在花了几个小时试图解决这个问题后，我想到了在我的动画中每帧声明一帧，我意识到只有非动画帧没有运行。因此，如果您想为该浏览器和设备编写动画，您只需要使用具有“动画”功能的动画。如果您有此问题，请以这种方式声明动画，它将在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 })
    ])
]);

---

在花了几个小时试图解决这个问题后，我想到了在我的动画中每帧声明一帧，我意识到只有非动画帧没有运行。因此，如果您想为该浏览器和设备编写动画，您只需要使用具有“动画”功能的动画。如果您有此问题，请以这种方式声明动画，它将在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 })
    ])
]);

---

嘿，我遇到了同样的问题，但我不明白你的解决方案。你不是在0.3秒内设置一个步骤的动画，而是将其拆分？跑0.7秒？我是对的，因为听起来不对^^@EinfachHans好吧，如果你这么说，请随意分享你的解决方案。。。这是一个让动画在IOS和safari设备上运行的变通方法，对错我都分享了它，因为它对我有效，解决了我的问题。我没有解决方案。我只是问一下你的，因为我不明白@EinfachHans是的，我注意到它在ios和safari上工作的唯一方式是分割动画并声明每个帧，以较小的步骤合成完整的动画。可能是兼容性问题或bug，我不确定。嘿，我遇到了同样的问题，但我不明白你的解决方案。你不是在0.3秒内设置一个步骤的动画，而是将其拆分？跑0.7秒？我是对的，因为听起来不对^^@EinfachHans好吧，如果你这么说，请随意分享你的解决方案。。。这是一个让动画在IOS和safari设备上运行的变通方法，对错我都分享了它，因为它对我有效，解决了我的问题。我没有解决方案。我只是问一下你的，因为我不明白@EinfachHans是的，我注意到它在ios和safari上工作的唯一方式是分割动画并声明每个帧，以较小的步骤合成完整的动画。也许这是一个兼容性问题或者一个bug，我不确定。