javascript - 具有属性绑定(bind)的 Angular 2 动画不起作用

Question

我正在尝试为 div 制作淡入淡出的动画。

代码:

import {
    Component,
    trigger,
    state,
    style,
    transition,
    animate,
    keyframes,
    group
} from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <button (click)="toggle()"> toggle div </div>
        <div [@visibilityChanged]="visibilityState">
            <p>Some text...</p>
        </div>`,
    animations:
        [
            trigger('visibilityChanged', [
                state('shown', style({opacity: 1})),
                state('hidden', style({opacity: 0})),
                transition('shown => hidden', animate('600ms')),
                transition('hidden=> shown ', animate('300ms')),
            ])
        ],
})

export class AppComponent {
    visibilityState : string = 'hidden';
    toggle(){
        if(this.visibilityState === 'hidden')
            this.visibilityState = 'shown';
        else
            this.visibilityState = 'hidden';
    }
 }

当我运行此代码时，尽管可见性状态为“隐藏”，但仍会显示“一些文本...”。切换事件不起作用，代码中的其他点击事件没有反应。 当我删除 div 时:

 <div [@visibilityChanged]="visibilityState">
    p>Some text.../p>
 </div>`,

程序运行正常，但我无法执行淡入/淡出动画。 为什么它不起作用？非常感谢!

Answer 1

您的代码看起来不错。据我所知，您使用的是错误的导入。

从 Angular 4 开始，动画在它们自己的包中，而不是在 @angular/core 中，因此您的导入语句将如下所示:

import { trigger, style, transition, animate, group } from '@angular/animations';

您还必须导入 BrowserAnimationsModule。因此，例如在您的 AppModule 中:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  // ...
  imports: [BrowserAnimationsModule]
})
export class AppModule { }

如果你没有安装 AnimationsModule 运行:

npm install @angular/animations@latest --save