web-dev-qa-db-fra.com

Angular 4 animations ne fonctionnent pas avec Safari iOS 9.3

Je teste actuellement mon application dans tous les navigateurs possibles et je me suis rendu compte que les animations angulaires ne se comportaient pas comme prévu dans Safari iOS 9.3. Après des heures Et des heures à essayer de résoudre ce problème, je viens demander de l'aide. Merci d'avance.

Mon code se lit comme suit:

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') '';
}

routage.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'))
  ]);
}

J'ai essayé de créer un Fiddle mais je ne parviens pas à reproduire l'erreur.

angularanimation
7
Roman Oxman

L’API d’animations Web requiert un polyfill sur Safari, je crois. Et ce n'est pas activé par défaut. Vous aurez juste besoin d'installer Polyfill, puis d'ajouter une ligne ou deux à votre fichier polyfills.ts dans le dossier/src de votre application.

Voir ici: Comment ajouter un polyfill API Web Animations à un projet Angular 2 créé avec Angular CLI

(en recopiant la meilleure réponse ci-dessous)

Ajouter le polyfill avec la version plus récente et Webpack de Angular CLI est plus simple:

Installer avec 

npm install web-animations-js --save

Ajouter à polyfills.ts: 

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

Cela a également fonctionné si je le fais

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

La source de ce problème est ngx-pdf-viewer selon une ancienne version de pdf.js 1.x qui polyfille de manière incorrecte les animations Web sur toutes les versions d’iOS ( https://github.com/mozilla/pdf.js /blob/6521d2fd941f26a1b7ae9b97f71842e49f5ff241/src/shared/compatibility.js#L571-L575 ). Cela a été fait pour corriger un bogue dans les anciennes versions d'iOS, mais provoque la rupture des nouvelles versions d'iOS avec un requestAnimationFrame qui fonctionne.

3
E. Gregious

Enfin, l'erreur était trop spécifique, la bibliothèque ngx-pdf-viewer était à l'origine de cette erreur au moment du chargement du composant.

Ce que j'ai fait pour résoudre ce problème, c'est de compiler le composant de manière dynamique uniquement lorsque l'utilisateur est sur le poste de travail et que j'ai adopté une autre approche pour mobile.

Mon code: 

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);
});
1
Roman Oxman

Essayez en rétrogradant votre paquet avec cette version

"@angular/animations": "4.0.2"
0
Pardeep Jain