Не запускается угловая анимация

Question

Я пытаюсь добиться простой анимации с помощью угловых. По нажатию кнопки я меняю состояние 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

import {состояние, стиль, переход, триггер, анимация} from "@ angular / animations ";

export const 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 не жалуется на это. Нет ошибокПредупреждений нет.

Answer 2

Не следует одновременно использовать [@showState]="isShown ? 'shown' : 'notShown'" и *ngIf="isShown. особенно когда notWhosn не зарегистрированное состояние.

Ваш код должен выглядеть следующим образом:

@Component({
  selector: 'app-root',
  template: `
     <button (click)="isShown = !isShown">Toggle Element</button>
     <p @enterAnimation *ngIf="isShown"> You can see me now!</p>`
  ,
  animations: [
    trigger(
      'enterAnimation', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        style({ opacity: 1 }),
        animate('500ms', style({ opacity: 0 }))
      ])
    ]
    )
  ],
})
export class AppComponent {
  isShown = false;
}