Angular 4 动画不适用于 Safari iOS 9.3

我目前正在所有可能的浏览器中测试我的应用程序，我发现角度动画在 Safari iOS 9.3 中的行为与预期不符。下班后 花了几个小时试图解决这个问题，我来寻求帮助。提前致谢。

我的代码如下：

包.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"
},

登陆组件.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') '';
}

路由动画.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'))
  ]);
}

我尝试使用小提琴，但无法重现该错误。

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

看这里：如何将 Web Animations API polyfill 添加到使用 Angular CLI 创建的 Angular 2 项目

（复制下面的最佳答案）

使用较新的 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';