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 
     } 
    }