Choppy angular animations in firefox (intergrating

Question

What is the proper way of integrating web animations js in an angular 2 project? I have done the necessary steps provided here. But the animations in firefox are still choppy.

I have created a new angular project using the latest angular cli (version: 1.0.3) and downgraded angular version by editing dependencies in package.json. The animation is working properly in chrome.

Is there something I'm missing here?

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

This is my component -

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

Removing vendor prefixed transition property from the animating element fixed this issue. My guess is this somehow was meddling with web animations js calculations causing the animation to restart again in firefox. Changing the values to pixels didn't help either in this situation. Wasted a day over this. Hope this answer would help anyone facing this issue (after integrating proper polyfills) in the future.