Angular 2 动画不起作用

Posted 2023-02-23

【中文标题】Angular 2 动画不起作用

【英文标题】：Angular 2 Animations will not work

【发布时间】：2017-09-01 18:44:08

【问题描述】：

按照 Angular 2 动画文档 (https://angular.io/docs/ts/latest/guide/animations.html) 我迁移到 Angular 4.0.1。这是我的 package.json 的一部分：

"@angular/common": "~4.0.1",
"@angular/compiler": "~4.0.1",
"@angular/core": "~4.0.1",
"@angular/forms": "~4.0.1",
"@angular/http": "~4.0.1",
"@angular/platform-browser": "~4.0.1",
"@angular/platform-browser-dynamic": "~4.0.1",
"@angular/router": "~4.0.1",
"@angular/animations": "~4.0.1",
"typescript": "^2.2.2",
"zone.js": "^0.8.4"

system.config.js

  '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
  '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
  '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

app.module.ts

import  NgModule       from '@angular/core';
import  BrowserModule, Title  from '@angular/platform-browser';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
...
@NgModule(
  imports:      [ BrowserModule, BrowserAnimationsModule, appRouting, FormsModule ],
...
)

在我的自定义组件中，我还导入了角度动画：

import  trigger, state, style, animate, transition  from '@angular/animations';

我的视图（由 templateUrl 分配的外部视图！）看起来像这样：

<div class="container" [@containerState]="showContainer">
...
</div>

问题是：我总是收到控制台错误消息：

错误：未捕获（承诺中）：错误：找到合成属性 @containerState。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。

当我删除这个合成属性时，一切正常，但我无法使用 Angular Animations。

有什么想法吗？我不使用 angular-cli！

---

更新 container.component.ts

import  Component, OnInit, OnDestroy, EventEmitter, HostListener, Input, Output  from '@angular/core';
import  trigger, state, style, animate, transition  from '@angular/animations';
@Component(
    templateUrl: '...',
    selector: '...',
    animations: [
        trigger('containerState', [
            state('hide', style(transform: 'translateY(-102%)')),
            transition('hide => show', [
                animate(500, style(transform: 'translateY(0)'))
            ]),
            transition('show => hide', [
                animate(500, style(transform: 'translateY(-102%)'))
            ])
        ])
    ]
)

---

目前正在运行...

我做了什么？删除了完整的 node_modules 文件夹并运行全新安装。之后一切正常。很奇怪！我会尝试将另一个 Angular 2.x 应用升级到 Angular 4.x

【问题讨论】：

我看到除了组件 @Component( animations:[ trigger('containerState', [ state('*', . . . . 之外的所有必要部分，我也不确定 @angular/animations/browser 是否必要。

还要检查您是否遇到了这个“误导性错误消息”问题。 github.com/angular/angular/issues/15581

我检查了一切。我还从 Angular 2 Animations 文档中下载了示例：link，复制了我的组件，一切正常。最后它在删除完整的 node_modules 文件夹并运行全新安装后工作。

【参考方案1】：

Angular2 认为前缀“@”代表一个“合成侦听器”，它应该被您指定的动画模块覆盖。但是，您自己使用的是 @ 符号，<div class="container" [@containerState]="showContainer">

尝试删除“@”并查看是否适合您。