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
动画的触发?
答案 0 :(得分: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();
}