ngOnDestroy 或 DOM 移除时的 CSS 动画答案

【问题标题】：CSS animation on ngOnDestroy or DOM removalngOnDestroy 或 DOM 移除时的 CSS 动画
【发布时间】：2023-03-29 01:38:01
【问题描述】：

我正在使用 Angular 7，我想在组件的宿主元素上运行一些 CSS 动画，当该元素从 DOM 中移除时 - 组件已被销毁。

如果我想在 ngOnDestroy 方法上执行此操作，则宿主元素已从 DOM 中删除。
如果我想使用MutationObserver 监听父组件中已删除的元素，那么我会遇到同样的问题，该元素已从 DOM 中删除。

我还有哪些其他选择？最好的方法是什么？我还提到我不想使用 jquery 或其任何插件。

【问题讨论】：

标签： angular typescript css-animations

【解决方案1】：

你可以使用我认为的服务。
检查this page的最后一部分。

您必须在服务中创建一个可观察对象并在组件的 onDestroy 中调用它。然后在您的父母中订阅此事件。

【讨论】：

您能否扩展您的答案，并给出解释？仅发布链接的答案通常会在 Stackoverflow 上被否决并删除

【解决方案2】：

如果你有幸重新考虑这个问题，你可以用 Angular Animations 的void state 和 *ngIf 做类似的事情。

将BrowserAnimationsModule 导入您的app.module.ts：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports: [ BrowserAnimationsModule ]
})

包含你要销毁的组件的父组件可以实现void状态动画，并将其应用到带有*ngIf的子组件。例如：

@Component({

  animations: [
    trigger('animateDestroy', [
      state('void', style({ opacity: '0' })),
      transition('* => void', animate('500ms ease'))
    ])
  ],

  template: `
    <component-to-destroy *ngIf="someBoolean" @animateDestroy>
    </component-to-destroy>
  `

})
export class ParentComponent {
  someBoolean = true;
}

如果您将someBoolean 更改为false，由于*ngIf，Angular 将从DOM 中删除该组件。但在此之前，带有* => void 的animateDestroy 触发器告诉Angular 在从DOM 中删除元素之前进行动画处理。

Some reading about Angular Animations and the void state on the docs.

它不是 CSS，但它可以产生与 CSS 提供的相同效果。它让模板使用布尔值来处理组件的“是否销毁”状态，而不是跳过类内的程序性循环。

希望这会有所帮助。

【讨论】：