Angular 11、:enter 和 :leave 动画不适用于 *ngIf答案

【问题标题】：Angular 11, :enter and :leave animation not working with *ngIfAngular 11、:enter 和 :leave 动画不适用于 *ngIf
【发布时间】：2021-07-25 00:04:41
【问题描述】：

我刚开始使用 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],
})

【问题讨论】：

标签： angular angular-animations angular11

【解决方案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>