javascript - Angular 动画不触发

Question

我正在尝试用 Angular 实现一个简单的动画。单击按钮时，我将 showState 的状态从更改为 shown。因为我正在使用 *ngIf，所以我在动画中使用了 void 关键字，但它不起作用。

STACKBLITZ

CSS

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

app.component.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;
}

HTML

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

Animations.ts

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

导出常量 showStateTrigger = trigger("showState", [

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

]);

Answer 1

所以，我自己想通了。我失踪了:

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

在 appModule.ts 中

奇怪的是，angular 没有提示它。没有错误。没有警告。