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 for the the leave alias. Also try to add :enter transition and may to other states. although specifying [@item] in template should work.

Спусковой крючок

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