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

Angular2动画事件发射器移除子组件

1 个答案: