动画删除动态 Angular 组件？

Question

In this stackblitz demo 当我们单击 Create success 时，组件视图显示是动画的（在 5 秒内从不透明度 0 到不透明度 1。）。

如果我们清除容器 (this.container.clear())，则元素的移除不是动画。动画属性如下所示：

  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate(5000, style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate(5000, style({ opacity: 0 }))
      ])
    ])
  ],

在这种情况下，我们如何启用 leave 动画的触发？

Answer 1

将您的 alert.component.ts 更新为：

import { Component, Input, EventEmitter, Output } from '@angular/core';
import { trigger, style, animate, transition } from '@angular/animations';

@Component({
  selector: "alert",
  template: `
     <section [@fadeInOut]>
     <h1 (click)="output.next('output')">Alert {{type}}</h1>
    <section>
  `,
  styles: [`
  :host {
    display: block;
    overflow: hidden;
  }`],
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate(5000, style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate(5000, style({ opacity: 0 }))
      ])
    ])
  ],
  host: { '[@fadeInOut]': 'in' }
})
export class AlertComponent {
  @Input() type: string = "success";
  @Output() output = new EventEmitter();
}

感谢https://stackblitz.com/edit/angular-animate-dynamically-created-component?file=app%2Fhello.component.ts

动画删除动态 Angular 组件？

Animating the Removal of a dynamic Angular Component?

javascript

css

angular

typescript

angular-animations