小编Mar*_*rig的帖子

我刚刚开始使用 Angular 动画。并且不想用它来动画 *ngIf 。遗憾的是它不起作用:(。我没有收到错误消息。我从这里尝试了几种解决方案，但没有任何效果。此外，删除其中一个动画不会改变任何内容，或者完全删除其中一个 *ngIf-blocks 也不会改变任何内容。没有改变任何东西。它只是不起作用，并且终端或开发工具中也没有可见的错误。

这是来自打字稿的动画定义。

animations: [
  trigger('inOutPaneAnimation', [
    state('true', style({ opacity: 1, transform: 'translateX(0)' })),
  state('void', style({ opacity: 0, transform: 'translateX(-100%)' })),
  transition(':enter', [animate('750ms ease-in-out')]),
  transition(':leave', [animate('600ms ease-in-out')]),
]),
trigger('inOutActiveItemAnimation', [
    state('true', style({ opacity: 1, transform: 'translateX(0)' })),
  state('void', style({ opacity: 0, transform: 'translateX(100%)' })),
  transition(':enter', [animate('600ms ease-in-out')]),
  transition(':leave', [animate('750ms ease-in-out')]),
]),

HTML 看起来像这样：

<div
  *ngIf="activeItem"
  [@inOutActiveItemAnimation]
  class="bt3-locations__active-item"
>
  <app-location-active-item
    [isSingleLocation]="isSingleLocation"
    [location]="activeItem"
    [showRouteLabel]="showRouteLabel"
  ></app-location-active-item>
</div>
<div *ngIf="!activeItem" [@inOutPaneAnimation] #paneContent>
  <div
    *ngTemplateOutlet="
      locations.data.length > 1 ? multipleGroups …