Firefox中的断断续续的角度动画(Angular项目中的集成Web动画js) [英] Choppy angular animations in firefox (intergrating web animations js in angular project)

问题描述

将网络动画js 整合到一个角度的正确方法是什么2个项目?我已经完成了此处提供的必要步骤.但是firefox中的动画仍然不连贯.

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.

我通过使用package.json中的依赖项，使用最新的角度cli(版本:1.0.3)和降级的角度版本创建了一个新的角度项目.动画在chrome中可以正常工作.

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-

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>

推荐答案

从动画元素中删除供应商前缀的过渡属性可以解决此问题.我的猜测是，这某种程度上干扰了Web动画js的计算，从而导致动画再次在firefox中重新启动.在这种情况下，将值更改为像素也无济于事.在这上面浪费了一天.希望这个答案对将来(在集成适当的polyfills之后)面临此问题的人有所帮助.

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.

这篇关于Firefox中的断断续续的角度动画(Angular项目中的集成Web动画js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！