angular - ngOnDestroy 或 DOM 删除上的 CSS 动画

Question

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

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

我还有哪些其他选择以及执行此操作的最佳方法是什么？我还提到我不想使用 jquery 或其任何插件。

Answer 1

如果您有能力重新思考问题，您可以使用 Angular 动画的 void 状态和 *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，Angular 会因为 *ngIf 而从 DOM 中删除该组件。但在此之前，带有 * => void 的 animateDestroy 触发器会告诉 Angular 在从 DOM 中删除元素之前先进行动画处理。

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

它不是 CSS，但它可以产生与 CSS 提供的相同效果。它允许模板使用 bool 值处理组件的“毁坏或未毁坏”状态，而不是跳过类内的编程循环。

希望这能有所帮助。