子コンポーネントの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

休暇エイリアスとして* => voidの代わりに:leaveを使用することもできます。また、: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 
     } 
    }