[英]Angular 11, :enter and :leave animation not working with *ngIf
I just started with Angular animations.我刚开始使用 Angular 动画。 And wan't to animate a *ngIf with it.
并且不想用它为 *ngIf 设置动画。 Sadly it does't work:(. I don't get an error message. I tried several solutions from here, nothing worked. Also removing one of the animations doesn't change anything or removing one of the *ngIf-blocks entirely doesn't change anything. It just doesn't work, and there is also no error in the terminal or in the devtools visible.
遗憾的是它不起作用:(。我没有收到错误消息。我从这里尝试了几种解决方案,但没有任何效果。此外,删除其中一个动画不会改变任何内容,或者完全删除 *ngIf-blocks 之一不会'不要改变任何东西。它只是不起作用,终端或可见的开发工具中也没有错误。
Here the animations definition from the typescript.这里是来自 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')]),
]),
The HTML looks like this: 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>
The BrowserAnimationsModule is imported, into the the parent module. 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],
})
This is how you create :enter
and :leave
animation这就是您创建
:enter
和:leave
animation 的方式
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%)" })
)
])
])
You don't even need property binding []
, this is enough @inOutPaneAnimation
你甚至不需要属性绑定
[]
,这就足够了@inOutPaneAnimation
<div *ngIf="!activeItem" @inOutPaneAnimation #paneContent>
...
</div>
Here is a working stackblitz example这是一个有效的 stackblitz 示例
Note: Make sure to import BrowserAnimationsModule
in main module.注意:确保在主模块中导入
BrowserAnimationsModule
。
The solution, was fairly simple.解决方案相当简单。
Make sure the ViewEncapsulation of your component is not set to ShadowDom.确保组件的 ViewEncapsulation 未设置为 ShadowDom。 Then it is not working.
然后它不工作。
And also make sure to check @Sameer's answer.并确保检查@Sameer 的答案。 It is the right way to implement it.
这是实施它的正确方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.