firefox（角度プロジェクトのウェブアニメーションjsのインターグレイティング）でぎこちないアニメーションアニメーション

Question

角度2のプロジェクトでweb animations jsを統合する適切な方法は何ですか？私は必要なステップをhereで提供しました。しかし、Firefoxのアニメーションはまだ不安定です。

最新の角度cli（バージョン：1.0.3）を使用して新しい角度プロジェクトを作成し、package.jsonの依存関係を編集して角度バージョンをダウングレードしました。アニメーションはクロムで正しく機能しています。

ここに何か不足していますか？

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" 
} 

これは私の構成要素である -

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

テンプレート - animatiからベンダー接頭遷移プロパティを削除

<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

要素がこの問題を修正しました。私の推測では、これは何とかウェブアニメーションのjs計算に干渉してアニメーションをFirefoxで再開させる原因になっています。このような状況では、値をピクセルに変更しても役に立ちませんでした。これ以上の日数を無駄にした。この答えが将来的に（適切なポリフィルを統合した後の）この問題に直面する人に役立つことを願っています。