角度动画未触发

Question

我正在尝试用角度实现简单的动画。单击按钮后，我将showStatefrom 的状态更改为shown。由于我使用 *ngIf 我void在动画中使用了关键字，但它不起作用。

堆栈闪电战

CSS

p {
  border: 1px solid black;
  background-color: lightblue;
  padding: 10px;
}

应用程序组件.ts

import { showStateTrigger } from './animations';
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  animations: [
    showStateTrigger
  ]
})
export class AppComponent {
  isShown = false;
}

超文本标记语言

<button (click)="isShown = !isShown">Toggle Element</button>
<p [@showState]="isShown ? 'shown' : 'notShown'" *ngIf="isShown"> You can see me now!</p>

动画.ts

从“@angular/animations”导入{状态、样式、过渡、触发器、动画}；

导出 const showStateTrigger = 触发器("showState", [

  transition('void => shown', [
    style({
      opacity: 0
    }),
    animate(2000, style({
      opacity: 1
    }))
  ])

]);

Answer 1

所以，我自己想出了办法。我失踪了：

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

在 appModule.ts 中

奇怪的是，Angular 并没有抱怨这一点。没有错误。无警告。