Angular 11, :enter and :leave animation not working with *ng

Question

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

这里是typescript中的动画定义。

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>

点击此处阅读更多

这是一个工作堆叠的例子

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

Answer 2

解决方案相当简单。

确保组件的ViewEncapsulation未设置为ShadowDom。那么它就不起作用了。

还要确保查看@samaer的回答。这是实现它的正确方法