Angular 4动画不适用于Safari iOS 9.3

时间:2017-08-22 17:53:43

标签: angular animation

我目前正在所有可能的浏览器中测试我的应用程序,并且我看到角度动画在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'))
  ]);
}

我试着想出一个小提琴,但我无法重现错误。

4 个答案:

答案 0 :(得分:16)

我相信网络动画API需要Safari上的polyfill。并且默认情况下不启用它。您只需安装polyfill,然后在app / src文件夹中的polyfills.ts文件中添加一行或两行。

见这里:How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI

(复制下面的最佳答案)

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

答案 1 :(得分:4)

此问题的根源是ngx-pdf-viewer,具体取决于旧的1.x版pdf.js,它错误地在所有iOS版本(https://github.com/mozilla/pdf.js/blob/6521d2fd941f26a1b7ae9b97f71842e49f5ff241/src/shared/compatibility.js#L571-L575)上填充了网络动画。这样做是为了修复旧iOS版本中的错误,但会导致具有工作requestAnimationFrame的新iOS版本中断。

答案 2 :(得分:2)

最后,错误非常具体,ngx-pdf-viewer库在加载组件时导致了此错误。

我要解决的问题是,只有当用户在桌面上并且我采用另一种移动方法时才动态编译组件。

我的代码:

class Person{
  constructor(name){
    this.name = name;
  }

  getName(){
    return this.name;
  }

  setName(name){
    this.name = name;
  }
}


function Company(cName){
  this.cName = cName;
}

Company.prototype.getName = function(){
    return this.cName;
}

答案 3 :(得分:0)

尝试使用此版本降级您的包

"@angular/animations": "4.0.2"