Angular2 animate event emitter удаление дочернего компонента

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] в шаблоне должно работать.

Trigger

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