Angular 4 动画在 Safari iOS 9.3 上无法正常工作

Question

我目前正在测试我的应用程序在所有可能的浏览器中，我发现在Safari iOS 9.3中，Angular动画的行为与预期不符。在花费了数个小时尝试解决后，我来求助。提前感谢。

我的代码如下： 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'))
  ]);
}

我试图创建一个Fiddle，但是我无法重现这个错误。

- Roman Oxman

Answer 1

我相信Web动画API在Safari上需要使用polyfill，并且默认情况下未启用。您只需要安装polyfill，然后在应用程序的/src文件夹中的polyfills.ts文件中添加一两行即可。

请参见：如何为使用Angular CLI创建的Angular 2项目添加Web Animations API polyfill（以下是最佳答案的复制）

使用较新版本的Webpack Angular CLI更容易添加polyfill：

使用以下命令进行安装：

npm install web-animations-js --save

添加到 polyfills.ts：

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

如果我这样做，它也有效

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

- diopside

---

我忘记在问题描述中添加polyfills.ts了，但我已经导入了web-animations-js... 它在所有地方都可以工作，除了iPhone，这实际上是很多问题。 - Roman Oxman

运行 Angular 4+，这个工作得非常好。谢谢！ - Farasi78

Answer 2

这个问题的根源在于ngx-pdf-viewer依赖于旧版1.x的pdf.js，该版本错误地对所有iOS版本进行web-animations填充（https://github.com/mozilla/pdf.js/blob/6521d2fd941f26a1b7ae9b97f71842e49f5ff241/src/shared/compatibility.js#L571-L575）。这是为了修复旧版iOS中的一个错误，但导致新版iOS中的requestAnimationFrame无法正常工作。

- E. Gregious

Answer 3

最终错误非常具体，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);
});

- Roman Oxman

Answer 4

尝试通过降级您的软件包到此版本

"@angular/animations": "4.0.2"

- Pardeep Jain

---

我尝试了这个方法并且降级了@angular/platform-browser，虽然它可以工作，但最终动画完全停止了。有什么想法吗？HTML元素只能获得最终所需的属性，但没有任何动画效果。 - Roman Oxman

Answer 5

@diopside的答案很完美，但我认为更准确的答案可能是这样的：

经过多次调查，我发现这个问题通常发生在使用iPhone 6且安装了iOS 12的用户身上。

您有两种解决办法：

1- 在位于“src”文件夹中的“ployfills.ts”文件中添加“web-animation-js”。

首先，运行这个命令：npm i -D web-animations-js

其次，在angular.json文件中添加以下代码行。

{
...
"projects:" {
  ...
  "architect": {
    ....
    "build": {
      ...
      "scripts": [
              {
                "input": "node_modules/web-animations-js/web-animations.min.js",
                "inject": false,
                "bundleName": "web-animations-js"
              }
            ],

第三步，将以下代码添加到ployfills.ts文件中。

if (!('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent))) {
  const script = document.createElement('script');
  script.src = 'web-animations-js.js';
  document.head.appendChild(script);
}

2- 禁用iOS的BrowserAnimationsModule，如下所示。

将以下代码添加到app.module.ts中。

const disableAnimations =
  !('animate' in document.documentElement)
  || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule.withConfig({ disableAnimations }),

- Kamran Taghaddos