在iphone和ipad设备中，Angular 4动画不流畅

Question

我正在开发离子3和角度4的混合应用。动画是这个项目中的重要关注点。它适用于Android和Chrome浏览器，但不适用于Safari和iPhone设备。

我尝试了包含pollyfill网络动画。动画正在运行，但iphone设备有些滞后，特别是转换风格的动画。

    <div class="choiceWrapper">
          <div class="choices top_left" [@flyleft]="fly" #choices id="1">
            <img [src]="quizData.image_top_left" />
            <div class="name" text-center ion-text color="light"></div>
          </div>
          <div class="choices top_right" [@flyright]="fly" #choices id="2">
            <img [src]="quizData.image_top_right">
            <div class="name" text-center ion-text color="light">{{quizData.text_top_right}}</div>
          </div>
          <div class="choices bottom_left" [@flyleft]="fly" #choices id="3">
            <img [src]="quizData.image_bottom_left">
            <div class="name" text-center ion-text color="light">{{quizData.text_bottom_left}}</div>
          </div>
          <div class="choices bottom_right" [@flyright]="fly" #choices id="4">
            <img [src]="quizData.image_bottom_right">
            <div class="name" text-center ion-text color="light">{{quizData.text_bottom_right}}</div>
          </div>
          <div class="cardwrapper">
            <div class="card" id="draggable" #swingCard [@swing]="swing" drag (touchdone)="touchdone($event)">
              <div #cardbounce *ngFor="let i of cardBouncer;let img=last"><img *ngIf="img" [src]="quizData.image_data"></div>
            </div>
          </div>
        </div>

    trigger('flyleft', [
          state('flyinactive', style({
            transform: 'translateX(-150%)',
            visibility: 'hidden'
          })),
          transition('* => flyactive', animate('700ms linear', keyframes([

            style({ transform: 'translateX(-150%)', opacity: '1', offset: 0 }),
            style({ transform: 'translateX(0)', offset: 1 })

          ]))),
          transition('* => flyinactive', animate('400ms linear', keyframes([

            style({ transform: 'translateX(0)', offset: 0 }),
            style({ transform: 'translateX(-150%)', opacity: '1', offset: 1 })

          ]))),

        ])

<ion-item text-wrap no-lines [@flyin] *ngFor="let dialog of slides;let i = index" #slidingItem>
        <ion-avatar item-start *ngIf="dialog.fields.type === 'customer'">
            <img [src]="dialog.fields.image" />
        </ion-avatar>
        <h2></h2>
        <p>
        </p>
    </ion-item>

trigger('flyin', [
      transition(':enter', animate('300ms ease-in', keyframes([
        style({ transform: 'translate3d(0,100px,0)', offset: 0 }),
        style({ transform: 'translate3d(0,0,0)', offset: 1 })
      ]))),

      transition(':leave', animate('500ms ease-out', style({
        transform: 'translateY(-300%)'
      })))
    ])

建议我做任何工作或任何很酷的插件......