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版本中断。