firefox 中的断断续续的 angular 动画（在 angular 项目中集成网络动画 js）

Question

什么是正确的整合方式web animations js in an angular 2 project? I have done the necessary steps provided 。但是 firefox 中的动画仍然不稳定。

我使用最新的 angular cli（版本：1.0.3）创建了一个新的 angular 项目，并通过编辑 package.json 中的依赖项降级了 angular 版本。动画在 chrome.

中正常运行

我在这里遗漏了什么吗？

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

模板 -

<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 中再次重新启动。在这种情况下，将值更改为像素也无济于事。浪费了一天的时间。希望这个答案能帮助将来遇到这个问题的任何人（在集成适当的 polyfill 之后）。

firefox 中的断断续续的 angular 动画（在 angular 项目中集成网络动画 js）

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

angular

angular2-animation

angular-animations