【发布时间】：2017-07-20 09:39:13
【问题描述】：
在 Angular 2 项目中集成 web animations js 的正确方法是什么？我已经完成了here 提供的必要步骤。但是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>
【问题讨论】：
-
为什么要降级你的 Angular 版本？你说的“越野车”是什么意思？在 Firefox 中（就像在 chrome 中一样）你不需要
web-animations.js让它工作 birtles.github.io/areweanimatedyet 吗？你的模板是什么样的？ -
@PierreDuc 我已经更新了模板。项目需求降级的原因。动画完成后，它会再次重新启动。所以我喜欢同一动画的 2 次重复。我关注了this。
-
考虑到 angular4 中的动画，修复了很多错误。我的建议是更新到最新版本。任何项目依赖项都应该在 angular4 上工作
-
选择 angular4 不在我的手中，伙计。有什么解决方法吗？我认为 angular2 中这样的错误已经解决了。
-
我认为我至少计算了 35 个“主要”错误修复（值得在更新日志中提及）与 angular 4 版本中的动画模块。 this 一个似乎是你现在正在处理的一个。考虑到 angular5 现在处于测试阶段，真的不建议留在旧版本上，并保持代码库是最新的
标签： angular angular2-animation angular-animations