Angular 4動畫不適用於Safari iOS 9.3

Question

我目前正在所有可能的瀏覽器中測試我的應用程序，並且我看到角動畫在Safari iOS 9.3中的行爲不像預期的那樣。經過幾小時 和幾小時試圖解決它我來請求幫助。提前致謝。

我的代碼如下：

的package.json

"dependencies": { 
    "@angular/animations": "^4.3.2", 
    "@angular/cdk": "^2.0.0-beta.8", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/material": "^2.0.0-beta.8", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@ngx-meta/core": "^0.4.0-rc.2", 
    "@ngx-translate/core": "^7.1.0", 
    "@ngx-translate/http-loader": "^1.0.1", 
    "angular2-moment": "^1.6.0", 
    "core-js": "^2.4.1", 
    "express": "^4.15.4", 
    "lodash": "^4.17.4", 
    "ng2-pdf-viewer": "^1.1.1", 
    "ng2-translate": "^5.0.0", 
    "rxjs": "^5.4.1", 
    "web-animations-js": "^2.3.1", 
    "zone.js": "^0.8.14" 
}, 

landing.component.ts

import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core'; 
import { stateTransition } from '../routing.animations'; 

@Component({ 
    selector: 'cp-landing', 
    templateUrl: './landing.component.html', 
    styleUrls: ['./landing.component.css'], 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    animations: [ stateTransition() ] 
}) 
export class LandingComponent { 
    @HostBinding('@stateTransition') ''; 
} 

routing.animations.ts

import { trigger, state, animate, style, transition } from '@angular/animations'; 

export function stateTransition() { 
    return trigger('stateTransition', [ 
    state('void', style({ 
     transform: 'translateY(50%)', 
     opacity: 0 
    })), 
    state('*', style({ 
     transform: 'translateY(0%)', 
     opacity: 1 
    })), 
    // enter animation 
    transition('void => *', animate('.5s 500ms')), 
    // exit animation 
    transition('* => void', animate('.5s')) 
    ]); 
} 

我試過了一個小提琴，但我無法重現錯誤。

Answer 1

最後錯誤是相當太具體的ngx-pdf-viewer文庫保持在裝載組件的瞬間造成此錯誤。

我做了什麼來解決它，只有當用戶在桌面上，我採取了另一種手機方式動態編譯組件。

我的代碼：

const template = '<pdf-viewer [src]="src"' + 
       '   [show-all]="true"' + 
       '   [zoom]="2">' + 
       '</pdf-viewer>'; 

const tmpCmp = Component({template: template})(class {}); 
const tmpModule = NgModule({ 
    declarations: [tmpCmp, PdfViewerComponent], 
    imports: [CommonModule]} 
)(class {}); 

this._compiler.compileModuleAndAllComponentsAsync(tmpModule) 
.then((factories) => { 
    const f = factories.componentFactories[0]; 
    const cmpRef = f.create(this._injector, [], null, this._m); 
    cmpRef.instance.src = this.data.src; 
    this.pdfViewerContainer.insert(cmpRef.hostView); 
}); 

Answer 2

嘗試通過使用此版本

"@angular/animations": "4.0.2" 

Answer 3

的網絡動畫API降級包需要在Safari中填充工具，我相信。其默認情況下未啓用。您只需安裝polyfill，然後在您的應用的/ src文件夾中的polyfills.ts文件中添加一行或兩行。

在這裏看到：How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI

（複製下面的最佳答案）

添加具有角CLI的更新，的WebPack版的填充工具很容易：

與安裝

npm install web-animations-js --save 

添加到polyfills.ts：

require('web-animations-js/web-animations.min'); 

它還工作，如果我做

import 'web-animations-js/web-animations.min'; 

Answer 4

這個問題的來源是根據pdf.js的一箇舊的1.x版本不正確地polyfills iOS上的所有版本的網絡動畫NGX-PDF查看器（https://github.com/mozilla/pdf.js/blob/6521d2fd941f26a1b7ae9b97f71842e49f5ff241/src/shared/compatibility.js#L571-L575）。這樣做是爲了修復舊版iOS版本中的錯誤，但會導致具有工作requestAnimationFrame的較新iOS版本中斷。