Angular2動畫事件發射器刪除子組件

Question

我有一個與事件發射器一起被刪除的子組件，我想在它的刪除上添加一個動畫。我的想法是動畫從通配符狀態到無效：

@Component({ 
    selector: 'content-attendee', 
    styleUrls: ['content-attendee.component.scss'], 
    template: ` 
    <div class="px1 item"> 
     testing 123 
     <a class="btn-remove ion-close-circled md fnt--mid-gray" (click)="handleRemoval()"></a> 
     </div> 
    </div> 
    `, 
    animations: [ 
     trigger('item', [ 
     transition('* => void', [ 
      animate(100, style({ transform: 'scale3d(0, 0, 0)' })) 
     ]) 
     ]) 
    ] 

}) 

export class ContentAttendeeComponent { 
    @Input() contentAttendee: AttendeeModel; 

    @Output() 
    delete: EventEmitter<AttendeeModel> = new EventEmitter<AttendeeModel>(); 

    handleRemoval(contentAttendee: AttendeeModel) { 
     this.delete.emit(this.contentAttendee); 
    } 
} 

但是，刪除動畫未運行，任何幫助真的很感激。

Answer 1

您還可以使用:leave代替離開別名的* => void。還嘗試添加:enter轉換並可能轉到其他狀態。儘管在模板中指定[@item]應該可行。

觸發

animations: [ 
     trigger('item', [ 
     transition(':leave', [ 
      animate(100, style({ transform: 'scale3d(0, 0, 0)' })) 
     ]) 
     ]) 
    ] 

模板

<div class="px1 item" [@item]="animationtrigger"> // remove "animationtrigger" just use [@item] 
    testing 123 
    <a class="btn-remove ion-close-circled md fnt--mid-gray" (click)="handleRemoval()"></a> 
    </div> 
</div> 

類

export class ContentAttendeeComponent { 

     @Input() contentAttendee: AttendeeModel; 
     animationtrigger:bool; // just to make sure a transition is firing 

     @Output() 
     delete: EventEmitter<AttendeeModel> = new EventEmitter<AttendeeModel>(); 

     handleRemoval(contentAttendee: AttendeeModel) { 
      this.delete.emit(this.contentAttendee); 
      this.animationtrigger=true; // remove this line eventually 
     } 
    }