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