Animations angulaires instables dans firefox (intégration d'animations web js dans un projet angulaire)

Question

Quelle est la bonne façon d'intégrer web animations js dans un projet angulaire 2? J'ai fait les étapes nécessaires fournies here. Mais les animations dans Firefox sont encore saccadées.

J'ai créé un nouveau projet angulaire en utilisant le dernier cli angulaire (version: 1.0.3) et une version angulaire dégradée en modifiant les dépendances dans package.json. L'animation fonctionne correctement en chrome.

Y at-il quelque chose qui me manque ici?

Package.json -

"dependencies": { 
    "@angular/common": "~2.4.1", 
    "@angular/compiler": "~2.4.1", 
    "@angular/compiler-cli": "^2.4.1", 
    "@angular/core": "~2.4.1", 
    "@angular/forms": "~2.4.1", 
    "@angular/http": "~2.4.1", 
    "@angular/platform-browser": "~2.4.1", 
    "@angular/platform-browser-dynamic": "~2.4.1", 
    "@angular/platform-server": "^2.4.1", 
    "@angular/router": "~3.4.0", 
    "bootstrap-sass": "^3.3.7", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.8", 
    "rxjs": "^5.0.2", 
    "systemjs": "0.19.40", 
    "web-animations-js": "^2.3.1", 
    "zone.js": "^0.7.4" 
} 

Ceci est mon élément -

import { Component, trigger, state, style, transition, animate } from '@angular/core'; 

@Component({ 
selector: 'app-home', 
templateUrl: 'home.component.html', 
animations: [ 
    trigger('mobileMenuAnimation', [ 
     state('hidden', style({ 
      left: '-100%' 
     })), 
     state('visible', style({ 
      left: '0' 
     })), 
     transition('hidden => visible', animate('400ms ease-out')), 
     transition('visible => hidden', animate('400ms ease-in')) 
    ]) 
    ] 
}) 

export class HomeComponent{ 
    showMobileMenu: string; 

    constructor(){ 
    this.showMobileMenu = 'hidden'; 
    } 

    showMenu(){ 
    this.showMobileMenu = this.showMobileMenu == 'hidden' ? 'visible' : 'hidden'; 
    } 
} 

Template -

<div class="body-wrapper"> 
<div class="fixed-menu-container"> 
    <div class="mobile-header"> 
     <div class="hamburger mobile" (click)="showMenu()" [class.close]="showMobileMenu == 'visible'"></div> 
     <a class="logo" routerLink="home"><img src="../assets/images/logo.png" alt=""></a> 
    </div> 
    <div [@mobileMenuAnimation]="showMobileMenu" class="fixed-menu"> 
     <a class="dashboard" routerLink="/dashboard" routerActive="active"><span>dashboard</span></a> 
     <a class="customers" routerLink="/customers" routerActive="active"><span>customers</span></a> 
     <a class="vendors" routerLink="/vendors" routerActive="active"><span>vendors</span></a> 
     <a class="banking" routerLink="/banking" routerActive="active"><span>banking</span></a> 
     <a class="accounting" routerLink="/accounting" routerActive="active"><span>accounting</span></a> 
     <a class="inventory" routerLink="/inventory" routerActive="active"><span>inventory</span></a> 
     <a class="reports" routerLink="/reports" routerActive="active"><span>reports</span></a> 
    </div> 
</div> 

Answer 1

Suppression des biens de transition préfixé vendeur du Animati L'élément ng a résolu ce problème. Ma conjecture est-ce en quelque sorte se mêlait avec des animations web js calculs provoquant l'animation de redémarrer à nouveau dans Firefox. Changer les valeurs en pixels n'a pas aidé non plus dans cette situation. Wasted un jour au cours de cela. Espérons que cette réponse aidera toute personne confrontée à ce problème (après avoir intégré les polyfills) dans le futur. Pourquoi abaisser votre version angulaire?