Choppy angular animations in firefox (intergrating web animations js in angular project)

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>

why downgrade your angular version? What do you mean by 'buggy'? In firefox (just like in chrome) you don't need the `web-animations.js` for it to work https://birtles.github.io/areweanimatedyet/ ? what does your template look like? — Poul Kruijt, Jul 20 '17 at 09:52
@PierreDuc I have updated the template. Downgraded cause of project requirements. Once the animation is complete it restarts itself once again. So I have like 2 repetitions of the same animation. I followed [this](https://stackoverflow.com/questions/39168689/angular-2-animations-transitions-only-working-on-chrome/39174708#39174708). — Safal Pillai, Jul 20 '17 at 11:07
There are a lot of bug fixes considering animations in angular4. My suggestion is to update to the latest version. Any project dependencies should work on angular4 as well — Poul Kruijt, Jul 20 '17 at 12:18
Opting for angular4 is not in my hands mate. Is there any work around for this? I thought bugs like this in angular2 was already ironed out. — Safal Pillai, Jul 20 '17 at 13:04
I think I count at least 35 'majorish' bug fixes (worth mentioning in the changelog) with the animation module in the angular 4 version. Where [this](https://github.com/angular/angular/blob/master/CHANGELOG.md#420-rc1-2017-05-26) one seems to be one you are dealing with right now. Considering angular5 is in beta now, it's really not advisable to stay on an old version, and keep the code base up to date — Poul Kruijt, Jul 20 '17 at 14:02
I thought [this](https://stackoverflow.com/a/39778524/1377626) solution would work in firefox. — Safal Pillai, Jul 21 '17 at 04:31

Safal Pillai · Accepted Answer · 2017-07-24T10:46:54.127

0

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.

edited Jul 24 '17 at 10:46

answered Jul 24 '17 at 05:39

Safal Pillai

1,567
1
16
31

I'm unable to grasp the answer, is there any chance to enrich with an example or few simple instructions? Thanks :) – freedev Jul 12 '20 at 09:55
1

I believe @SafalPillai meant to remove any `transition` on the target element/class you have in your existing CSS. The two transitions (CSS vs Angular Animation) seem to be fighting. – Tawm Dec 17 '20 at 18:42

Choppy angular animations in firefox (intergrating web animations js in angular project)

1 Answers1

Linked