Angular 11，:enter 和 :leave 动画不适用于 *ngIf

Question

我刚刚开始使用 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 : group;
      context: { data: getGroups(), group: 0 }
    "
  ></div>
</div>

BrowserAnimationsModule 被导入到父模块中。

import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { LocationItemComponent } from './location-item/location-item.component'; 
import { LocationsComponent } from './locations/locations.component';
import { LocationActiveItemComponent } from './location-active-item/location-active- 
item.component';
import { AccordionModule } from '../accordion/accordion.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [
      LocationsComponent,
    LocationItemComponent,
    LocationActiveItemComponent,
  ],
  imports: [CommonModule, AccordionModule, BrowserAnimationsModule],
  exports: [],
  providers: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

Answer 1

这就是您创建:enter动画:leave的方式

trigger("inOutPaneAnimation", [
    transition(":enter", [
        style({ opacity: 0, transform: "translateX(-100%)" }), //apply default styles before animation starts
        animate(
            "750ms ease-in-out",
            style({ opacity: 1, transform: "translateX(0)" })
        )
    ]),
    transition(":leave", [
        style({ opacity: 1, transform: "translateX(0)" }), //apply default styles before animation starts
        animate(
            "600ms ease-in-out",
            style({ opacity: 0, transform: "translateX(-100%)" })
        )
    ])
])

你甚至不需要属性绑定[]，这就足够了@inOutPaneAnimation

<div *ngIf="!activeItem" @inOutPaneAnimation #paneContent>
...
</div>

在这里阅读更多内容

这是一个有效的 stackblitz 示例

注意：确保BrowserAnimationsModule在主模块中导入。